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

Official way to ask jQuery wait for all images to load before executing something

jQuery的：当你在我这P＞＜／

1
2
3

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

它等待executes DOM for the to Load和你的尾巴。if then the images are not loaded的它仍然executes the队列。这是明显的是我们想要的任何东西，如果我们initializing such as DOM元素或attaching表现或隐藏事件。P＞＜／

我想说，虽然我们不想一些动画和图像是在"the running /负载。there is an to this Way在jQuery官方给你吗？P＞＜／

最好的方法是使用have to，但我不想给你，除非我真的要。P＞＜／

注：there is a bug jQuery 1.3.1在Internet Explorer中的which does等其实在Images to load之前执行$function() { }队列内。如果你知道你使用的平台，我的行为寻找get the above instead of the correct的行为描述的程序办理。P＞＜／

相关讨论

使用jquery，您可以使用$(document).ready()在加载dom时执行某些操作，使用$(window).on("load", handler)在加载所有其他操作(如图像)时执行某些操作。

如果您有一个jollyrogerjpeg文件(或其他合适的文件)，则可以在以下完整的HTML文件中看到差异：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

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

这样，在加载图像之前就会出现警报框，因为此时DOM已经就绪。如果您随后更改：

1	$(document).ready(function() {

进入：

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

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

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

1
2
3

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

相关讨论

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

它与$(window).load(function() { .. })类似，只是允许您定义任何要检查的选择器。如果您只想知道EDOCX1(例如5)中的所有图像何时加载，那么这就是您的插件。

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

WaitForImages jQuery插件

Github存储库。
自述文件。
生产来源。
开发来源。

示例用法

1
2
3

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

JSfiddle示例。

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

相关讨论

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

演示

下载

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

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

相关讨论

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

例如。：

1
2
3
4
5
6
7
8
9
10

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

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

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

1
2
3
4

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

相关讨论

我建议使用imagesLoaded.jsjavascript库。

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

如https://stackoverflow.com/questions/26927575/why-use-imagesloaded-javascript-library-versus-jquerys-window-load/26929951上的答案所示

It's a matter of scope. imagesLoaded allows you target a set of images, whereas $(window).load() targets all assets — including all images, objects, .js and .css files, and even iframes. Most likely, imagesLoaded will trigger sooner than $(window).load() because it is targeting a smaller set of assets.

使用图像加载的其他好理由

由IE8正式支持+
许可证：MIT许可证
依赖项：无
重量(缩小&gzip)：7kb缩小(轻！)
下载生成器(帮助减轻重量)：不需要，已经很小了
吉瑟布：是的
社区贡献者：相当大，超过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
Imagesloaded javascript库：浏览器和设备支持什么？

有了jquery，我就有了这个……

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

$(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/molokolco/nwjdb/

相关讨论

这样，您可以在加载主体或任何其他容器(取决于您的选择)中的所有图像时执行操作。纯jquery，不需要插件。

1
2
3
4
5
6
7
8
9

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

使用Imagesloaded Packaged v3.1.8(最小化时为6.8kb)。它相对较旧(自2010年以来)，但仍在进行中。

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

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

为什么它优于使用：

1	$(window).load()

因为您可能希望动态加载图像，如：jfiddle

1
2
3

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

相关讨论

我的解决方案类似于molokolco。写为jquery函数：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

$.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);
};

例子：

1
2
3
4
5
6
7

<img src="img1.png"/>
<img src="img2.png"/>

$('div').waitForImages(function () {
console.log('img loaded');
});