1

在我们的网站上，我们使用 HTML 画布绘制了一条摆动线。在绘制摆动线之前，我使用在内容完全加载后测量元素高度处的代码测量正在加载的页面的高度，然后回调到我的 drawlines.js 脚本，该脚本采用完成区域的尺寸并绘制摆动线。

这在 Chrome 和 Firefox 中运行良好，但 IE9 和 10 似乎间歇性地无法在http://www.petersencreative.com/design等页面上绘制线条。我在检查员中看不到任何失败，所以我不知道如何诊断问题，更不用说修复它了。

我很欣赏这是一个相当具体的问题，但非常感谢任何指针。

编辑：当代码在 IE 中失败时，它只会到达警报 0。

function watchForBottomDimension(element, callback) {
    var $element, images, loaded;

    // Get a jQuery wrapper for `element`
    $element = jQuery(element);
    alert('0');
    // Find the images within it that aren't loaded yet
    images = $element.find("img").filter(function(index, img) {
        return !img.complete;
    });

    // Find any?
    if (images.length === 0) {
        // No, we're done -- call the callback asynchronously for
        // consistency with the case below where we have to wait
        alert('1');
        setTimeout(done, 0);
    }
    else {
        // We're waiting for some images, do that
        loaded = 0;
        images.load(function() {
            // One of them loaded; was it the last one?
            if (++loaded === images.length) {
                // Yup, we're done
                alert('2');
                done();
            }
        }); 
    }

    // Handle completion
    function done() {
        var top, height, bottom;

        top = $element.offset().top; // Vert offset of element
        height = $element.outerHeight(true); // Height of element

        // Offset to bottom of element
        bottom = top + height;

        // Call the callback with the value

        callback(element, bottom);
    }
}

此功能位于http://www.petersencreative.com/templates/320andup/js/drawlines.js

皮特

4

2 回答 2

1

您是通过<img>HTML 源代码中的标签加载这些图像，还是通过在 JavaScript 中动态创建它们？

如果它们在 HTML 源代码中，您可能会遇到麻烦。

如果您在 JavaScript 中创建它们，那么您应该能够通过在设置其属性之前load为每个设置处理程序来检测它们何时加载：Image src

var img = document.createElement( 'img' );
img.onload = function() { /* ... */ };
img.src = 'test.png';
element.appendChild( img );

或者：

$('<img>')
    .load( function() {
        /* ... */
    })
    .attr( 'src', 'test.png' )
    .appendTo( $element );

或者就此而言，您可以使用事件委托：

// Before loading any of the images
$(element).on( 'load', 'img', function() {
    /* ... */
});
// Now you can start creating and loading the image elements

当您首先设置事件处理程序时，应在所有情况下调用，即使在具有已缓存图像的 IE 中也是如此。

这也使您的负载检测代码更加直接：您不必使用特殊代码来测试已经加载的图像，您只需依赖于load所有图像的事件。

于 2013-08-06T17:12:56.217 回答
0

从那以后，我发现了一个非常有用的 js 库，它可以在 IE 加载图像时进行处理，该库基于 Paul Irish 在该主题上所做的工作。

https://github.com/desandro/imagesloaded

于 2013-10-31T12:06:13.923 回答