Question

我有一个div，其中我附加了imgs。图片正在使用AJAX加载20个项目。他们用jQuery动画展示。动画延迟的问题。我认为有两个问题：

未下载显示的图片，我现在想要显示
当我设置css display：block to img时，浏览器绘制图像时会出现延迟

所以问题是如何等待下载图像包（20个项目）以及如何处理绘画延迟？

P / S。如果我为所有img-tags显示空div（只为它们设置背景颜色）或1个图像，则动画可以快速运行。

Answer 1

您可以使用此代码段。它并不依赖于任何图书馆，并且对我们的项目运作良好。

/*
 * Preload an image if not cached, then call a callback function
 * @param {String} the image url
 * @param {Function} the callback function
*/
function loadImg(url, fn) {
    var img = new Image();
    img.src = url;
    if (img.complete) { // If the image has been cached, just call the callback
        if (fn) fn.call(img, true);
    } else {
        img.onerror = function() { // If fail to load the image
            if (fn) fn.call(img, false);
        };
        img.onload = function() { // If loaded successfully
            if (fn) fn.call(img, true);
            //On IE6, multiple frames in a image will fire the 'onload' event for multiple times. So set to null
            img.onload = null; 
        };
    };
}

对于您的场景，您可以传递回调函数，如：

var callback = function(loaded) {
    if (loaded === true) {
        // do the animation. 
        var img = this; // now `this` points to the image itself.
    } else {
        // show default image or 'image failed to load'.
    }
}

Answer 2

您可以使用我的jQuery plugin等待您的新元素中的图片下载。

$('#container').waitForImages().done(function() { 
  $(this).addClass('ready');
});

Answer 3

您可以提前预加载图像（因此它们都已在缓存中准备好并且在加载时不会有任何延迟），或者您可以在需要时加载它们并在加载前使用通知动画。无论哪种方式，如果你想要一个平稳运行的动画，你需要确保在开始动画之前加载图像。

您可以看到有关如何使用代码示例预加载图像的其他参考资料。第一个引用支持在加载所有图像时调用的回调：

Image preloader javascript that supports events

Is there a way to load images to user's cache asynchronously?

How do you cache an image in Javascript

Answer 4

使用javascript的.complete

<img src="http://www.zastavki.com/pictures/originals/2013/Photoshop_Image_of_the_horse_053857_.jpg" id="something" />

var myVar = setInterval(function(){
    console.log("loading")
    if( document.getElementById("something").complete ) { // checks if image is loaded
        console.log( "loaded" );
        clearInterval(myVar);
    }
}, 500);

here是jsfiddle演示。

如何等待用javascript加载的图像？

4 个答案: