在执行某些操作之前要求 jQuery 等待所有图像加载的官方方法

Question

在 jQuery 中，当你这样做时：

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

它等待 DOM 加载并执行您的代码。 如果未加载所有图像，则它仍会执行代码。 如果我们正在初始化任何 DOM 内容，例如显示或隐藏元素或附加事件，这显然是我们想要的。

假设我想要一些动画，并且在加载所有图像之前我不希望它运行。 jQuery 中有官方的方法可以做到这一点吗？

我最好的方法是使用<body onload="finished()"> ，但我真的不想这样做，除非我必须这样做。

注意：Internet Explorer 中的 jQuery 1.3.1中存在一个错误，它实际上会在执行$function() { }代码之前等待所有图像加载完毕。 因此，如果您使用该平台，您将获得我正在寻找的行为，而不是上述正确行为。

Answer 1

使用 jQuery，您可以使用$(document).ready()在加载DOM时执行某些操作，并使用$(window).on("load", handler)在加载所有其他内容时执行某些操作，例如图片。

如果您有很多jollyrogerNN JPEG 文件（或其他合适的文件），则可以在以下完整的 HTML 文件中看到差异：

<html>
    <head>
        <script src="jquery-1.7.1.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                alert ("done");
            });
        </script>
    </head><body>
        Hello
        <img src="jollyroger00.jpg">
        <img src="jollyroger01.jpg">
        // : 100 copies of this in total
        <img src="jollyroger99.jpg">
    </body>
</html>

这样，警报框就会在图像加载之前出现，因为此时 DOM 已准备就绪。 如果你然后改变：

$(document).ready(function() {

进入：

$(window).on("load", function() {

然后直到加载图像后才会出现警报框。

因此，要等到整个页面准备就绪，您可以使用以下内容：

$(window).on("load", function() {
    // weave your magic here.
});

Answer 2

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

它类似于$(window).load(function() { .. }) ，除了它允许您定义任何要检查的选择器。 如果您只想知道#content （例如）中的所有图像何时加载，这是适合您的插件。

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

waitForImages jQuery 插件

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

示例用法

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

jsFiddle 上的示例。

GitHub 页面上提供了更多文档。

Answer 3

$(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).
 *  @author:  H. Yankov (hristo.yankov at gmail dot com)
 *  @version: 1.0.0 (Feb/22/2010)
 *  http://yankov.us
 */

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

Answer 4

对于那些希望在$(window).load触发后收到请求的单个图像的下载完成通知的人，您可以使用图像元素的load事件。

例如：

// create a dialog box with an embedded image
var $dialog = $("<div><img src='" + img_url + "' /></div>");

// get the image element (as a jQuery object)
var $imgElement = $dialog.find("img");

// wait for the image to load 
$imgElement.load(function() {
    alert("The image has loaded; width: " + $imgElement.width() + "px");
});

Answer 5

到目前为止，没有一个答案给出了似乎是最简单的解决方案。

$('#image_id').load(
  function () {
    //code here
});

Answer 6

我建议使用imagesLoaded.js javascript 库。

为什么不使用 jQuery 的$(window).load() ？

正如https://stackoverflow.com/questions/26927575/why-use-imagesloaded-javascript-library-versus-jquerys-window-load/26929951

这是一个范围问题。 imagesLoaded 允许您定位一组图像，而$(window).load()定位所有资产——包括所有图像、对象、.js 和 .css 文件，甚至 iframe。 最有可能的是，imagesLoaded 会比$(window).load()更早触发，因为它针对的是较小的资产集。

使用图像加载的其他充分理由

• IE8+官方支持
• 许可证：麻省理工学院许可证
• 依赖：无
• 重量（缩小和压缩）：7kb 缩小（轻！）
• 下载生成器（有助于减轻重量）：不需要，已经很小了
• 在 Github 上：是的
• 社区和贡献者：相当大，4000+ 成员，虽然只有 13 个贡献者
• 历史和贡献：稳定，相对较旧（自 2010 年以来）但仍然活跃的项目

资源

• github项目： https : //github.com/desandro/imagesloaded
• 官网： http : //imagesloaded.desandro.com/
• 检查图像是否在 JavaScript 中加载（无错误）
• https://stackoverflow.com/questions/26927575/why-use-imagesloaded-javascript-library-versus-jquerys-window-load
• imageloaded javascript 库：浏览器和设备支持是什么？

Answer 7

使用 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/

Answer 8

通过这种方式，您可以在加载 body 或任何其他容器（取决于您的选择）中的所有图像时执行操作。 纯 JQUERY，无需插件。

var counter = 0;
var size = $('img').length;

$("img").load(function() { // many or just one image(w) inside body or any other container
    counter += 1;
    counter === size && $('body').css('background-color', '#fffaaa'); // any action
}).each(function() {
  this.complete && $(this).load();        
});

Answer 9

使用 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', '...');
});

Answer 10

我的解决方案类似于molokoloco 。 写成 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>

Answer 11

我通过以下方式找到了这个解决方案：@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);"/>