在jQuery中,当你这样做:

$(function() {
   alert("DOM is loaded, but images not necessarily all loaded");
});

它等待DOM加载并执行您的代码。如果没有加载所有的图像,那么它仍然执行代码。这显然是我们在初始化任何DOM内容(如显示或隐藏元素或附加事件)时所需要的。

假设我想要一些动画我不想让它运行直到所有图像都加载完毕。jQuery中有官方的方法来做到这一点吗?

最好的方法是使用<body onload="finished()“>,但除非迫不得已,我真的不想这么做。

注意:在ie浏览器的jQuery 1.3.1中有一个bug,它实际上是在执行$function(){}内的代码之前等待所有图像加载。所以如果你正在使用这个平台,你会得到我正在寻找的行为,而不是上面描述的正确行为。


当前回答

使用imagesLoaded PACKAGED v3.1.8(最小化时6.8 Kb)。这是一个相对较老的项目(自2010年以来),但仍然是活跃的项目。

你可以在github上找到: https://github.com/desandro/imagesloaded

他们的官方网站: http://imagesloaded.desandro.com/

为什么它比使用更好:

$(window).load() 

因为您可能希望动态加载图像,就像这样:jsfiddle

$('#button').click(function(){
    $('#image').attr('src', '...');
});

其他回答

我写了一个插件,可以在图像加载到元素时触发回调,或者每加载一个图像就触发一次。

它类似于$(window).load(function() {..}),除了它允许您定义任何选择器进行检查。如果你只想知道什么时候所有的图片在#content(例如)已经加载,这是为你的插件。

它还支持加载CSS中引用的图像,如background-image, list-style-image等。

jQuery插件

GitHub库。 自述文件。 生产来源。 开发源码。

示例使用

$('selector').waitForImages(function() {
    alert('All images are loaded.');
});

jsFiddle的例子。

更多的文档可以在GitHub页面上找到。

$(window).load()只在页面第一次加载时起作用。如果你正在做动态的事情(例如:点击按钮,等待一些新的图像加载),这是行不通的。要实现这一点,你可以使用我的插件:

下载

/**
 *  Plugin which is applied on a list of img objects and calls
 *  the specified callback function, only when all of them are loaded (or errored).
 *  @version: 1.0.0 (Feb/22/2010)
 */

(function($) {
$.fn.batchImageLoad = function(options) {
    var images = $(this);
    var originalTotalImagesCount = images.size();
    var totalImagesCount = originalTotalImagesCount;
    var elementsLoaded = 0;

    // Init
    $.fn.batchImageLoad.defaults = {
        loadingCompleteCallback: null, 
        imageLoadedCallback: null
    }
    var opts = $.extend({}, $.fn.batchImageLoad.defaults, options);
        
    // Start
    images.each(function() {
        // The image has already been loaded (cached)
        if ($(this)[0].complete) {
            totalImagesCount--;
            if (opts.imageLoadedCallback) opts.imageLoadedCallback(elementsLoaded, originalTotalImagesCount);
        // The image is loading, so attach the listener
        } else {
            $(this).load(function() {
                elementsLoaded++;
                
                if (opts.imageLoadedCallback) opts.imageLoadedCallback(elementsLoaded, originalTotalImagesCount);

                // An image has been loaded
                if (elementsLoaded >= totalImagesCount)
                    if (opts.loadingCompleteCallback) opts.loadingCompleteCallback();
            });
            $(this).error(function() {
                elementsLoaded++;
                
                if (opts.imageLoadedCallback) opts.imageLoadedCallback(elementsLoaded, originalTotalImagesCount);
                    
                // The image has errored
                if (elementsLoaded >= totalImagesCount)
                    if (opts.loadingCompleteCallback) opts.loadingCompleteCallback();
            });
        }
    });

    // There are no unloaded images
    if (totalImagesCount <= 0)
        if (opts.loadingCompleteCallback) opts.loadingCompleteCallback();
};
})(jQuery);

用jQuery我来这个…

$(function() {
    var $img = $('img'),
        totalImg = $img.length;

    var waitImgDone = function() {
        totalImg--;
        if (!totalImg) alert("Images loaded!");
    };

    $('img').each(function() {
        $(this)
            .load(waitImgDone)
            .error(waitImgDone);
    });
});

演示:http://jsfiddle.net/molokoloco/NWjDb/

我找到了这个解决方案:@Luca Matteis 在这里:https://www.examplefiles.net/cs/508021

但是我稍微编辑了一下,如下图所示:

function showImage(el){
    $(el).removeClass('hidden');
    $(el).addClass('show');

    $(el).prev().removeClass('show');
    $(el).prev().addClass('hidden');
}

<img src="temp_image.png" />
<img class="hidden" src="blah.png" onload="showImage(this);"/>

我的解决方案类似于莫洛洛可。jQuery函数:

$.fn.waitForImages = function (callback) {
    var $img = $('img', this),
        totalImg = $img.length;

    var waitImgLoad = function () {
        totalImg--;
        if (!totalImg) {
            callback();
        }
    };

    $img.each(function () {
        if (this.complete) { 
            waitImgLoad();
        }
    })

    $img.load(waitImgLoad)
        .error(waitImgLoad);
};

例子:

<div>
    <img src="img1.png"/>
    <img src="img2.png"/>
</div>
<script>
    $('div').waitForImages(function () {
        console.log('img loaded');
    });
</script>