Question

在our website上，我们使用HTML画布绘制一条摆动线。在绘制摇摆线之前，我使用Measure height of element after content is fully loaded处的代码测量正在加载的页面的高度，然后回调到我的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

范围内

皮特

Answer 1

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

如果它们位于HTML源代码中，则可能会遇到问题。

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

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 );

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

这也使您的加载检测代码更加直接：您不必使用特殊代码来测试已加载的图像，您只需依赖// Before loading any of the images $(element).on( 'load', 'img', function() { /* ... */ }); // Now you can start creating and loading the image elements事件就可以了。 / p>

Answer 2

我已经找到了一个非常有用的js库，可以在IE加载图像时处理，这些图像基于Paul Irish在该主题上所做的工作。

https://github.com/desandro/imagesloaded

HTML Canvas在IE中间歇性地绘制

2 个答案: