在jQuery中，当您执行以下操作时：

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


它等待DOM加载并执行您的代码。如果未加载所有映像，则它仍将执行代码。如果我们要初始化任何DOM东西（例如显示或隐藏元素或附加事件），显然这就是我们想要的。

虽然我想要一些动画，但我不希望它一直运行到所有图像已加载。

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

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

评论

$（“ img”）。load（）不起作用？
我认为值得一提的是，如果设置了维度属性，则可以在就绪函数中安全地执行一些依赖于这些维度的代码。使用php时，您可以在上传时使用php.net/manual/zh-CN/function.getimagesize.php抓取它们，以将它们存储在db中或在输出到浏览器之前。
如果您想做一些令人难以置信的工作，那么请在下面的答案中找到stackoverflow.com/a/26458347/759452
中提到的非常好且流行的imageloaded javascript库。
“在这里，我来找到除了官方方式以外的任何东西。”

#1 楼

使用jQuery，您可以在加载DOM时使用$(document).ready()执行某些操作，并在加载所有其他内容（例如图像）时使用$(window).on("load", handler)执行某些操作。
在下面提供的完整HTML文件中可以看到区别您有很多jollyrogerNN JPEG文件（或其他合适的JPEG文件）：
<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.
});


评论

打ack的额头+1完全忘记了这一点。 $（window）.load（）在图像完成之前不会触发。

– Paolo Bergantino
09年2月13日在7:05
我也一样甚至，通读一个答案，不知道那是我，仍然不理解。

– im面
2010-09-17 5:57
请注意-在Chromium（我认为是Chrome）下，这似乎不起作用。 $（window）.ready事件似乎与$（document）.ready触发相同-在完成图像之前。

–内森·克劳斯（Nathan Crause）
2012年3月2日22:00
但这是$（window）.load（function（））

– TJ-
2012年12月27日20:22
@KyorCode您确定不只是因为IE中的图像被缓存了吗？如果发生这种情况，他们将根本不会触发“加载”事件。本文有助于解决此问题。

–杰米·巴克（Jamie Barker）
2014年5月19日15:01

#2 楼

我编写了一个插件，可以在元素中加载图像时触发回调，也可以在每次加载图像时触发一次。
与$(window).load(function() { .. })相似，不同之处在于它允许您定义要检查的选择器。如果您只想知道#content中所有图像的加载时间（例如），这就是适合您的插件。
它还支持加载CSS中引用的图像，例如background-image，list-style-image等。
waitForImages jQuery插件


GitHub存储库。

自述文件。

生产源。

开发来源。

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

jsFiddle上的示例。
更多文档可在GitHub页面上找到。

评论

谢谢！！ $ .load（）不适用于我，但这可以完美地解决问题。

– ashastral
2011年9月30日在22:31
我使用Chrome版本22.0.1229.94和该插件，并且尝试从waitFormImages中读取已加载图像的偏移量：（'img选择器'）.each（function（index）{var offset = $（this）.offset（ ）; ...}）; ，但是offset.top仍为零。为什么？

–basZero
2012年11月1日在16:14


@basZero很难在没有更多上下文的情况下讲述。请在“问题”页面上提出问题。

– alex
2012年11月1日于20:47
缓存图像时，它对我不起作用。有任何解决方法吗？

–曼迪普·in那教
13年1月29日下午5:50
它基本上类似于imagesLoaded，但也可以与srcsets一起使用。正是我想要的！很棒的插件！

–法比安·舍纳（FabianSchöner）
16年7月13日在11:15


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


评论

以防万一有人需要BatchImagesLoad插件的用法示例：yankov.us/batchImageLoad

–乔纳森·马尔祖洛（Jonathan Marzullo）
13年8月26日在23:29
我的意思是不尊重他人，但您不能仅仅依靠您关于插件可靠性的说法。正如Yevgeniy Afanasyev的回答中所述，imagesLoaded在此方面做得更好，并涵盖了您提到的用例以及其他许多极端情况（请参阅已解决的github问题）。

– Adrien Be
2014年11月13日17:00


#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");
});


#5 楼

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

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


评论

这样做的好处是，您可以在加载单个图像后立即触发它。

–顶级猫
18年2月14日在12:34

#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 +支持的许可证
：MIT许可证
依赖项：无
重量（最小化并压缩）：最小化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
图像加载的javascript库：什么是浏览器和devi ce支持吗？


#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/

评论

我发现，如果浏览器针对图像返回304 Not Mofified响应，则表示该图像已缓存，这将无法正常工作。

–JohnyFree
2015年9月10日于20:28

#8 楼

这样，当加载了体内或任何其他容器（取决于您的选择）中的所有图像时，您可以执行操作。纯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();        
});


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


评论

实际上，加载的图像不支持跨浏览器更改src属性值。您每次必须创建一个新的图像元素。在Firefox上尝试一下，您将看到问题出现。

– Adrien Be
2014年11月19日上午8:01
好点，我只在Google chrome和IE-11上进行过测试。它正在工作。谢谢。

–叶夫根尼·阿凡纳西耶夫（Yevgeniy Afanasyev）
2014年11月19日23:32
我确实在我的问题stackoverflow.com/q/26927575中添加了此跨浏览器问题，指向“您无法处理图像加载”，请参见Github上的imagesLoaded相关问题github.com/desandro/imagesloaded/issues/121

– Adrien Be
2014年11月20日9:59

#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>