在 jQuery 中，当你执行下面的代码：
$(function() {
alert("DOM is loaded, but images not necessarily all loaded");
});
它等待DOM加载并执行您的代码。如果所有图像尚未加载，则仍会执行代码。如果我们正在初始化任何DOM内容，例如显示或隐藏元素或附加事件，则这显然是我们想要的。
假设我想要一些动画效果，但在所有图像加载完成之前不希望它运行。在jQuery中是否有官方方法可以实现这一点？
我使用的最佳方法是使用<body onload="finished()">，但除非必须，否则我真的不想这样做。
注意：在Internet Explorer中，jQuery 1.3.1存在一个错误bug，实际上会在执行$function() { }内部的代码之前等待所有图像加载。因此，如果您正在使用该平台，则将获得我正在寻找的行为，而不是上述正确行为。
使用jQuery时，您可以使用$(document).ready()在DOM加载完成时执行一些操作，使用$(window).on("load", handler)在所有其他东西都加载完成时执行一些操作，例如图片。
区别可以从以下完整的HTML文件中看到，前提是您有许多jollyrogerNN 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.
});
我编写了一个插件，当元素中的图片加载完毕时可以触发回调，或者每张图片加载完毕时触发一次。
它类似于$(window).load(function() { .. })，但它允许您定义任何选择器进行检查。如果您只想知道是否所有#content中的图片（例如）都已加载完成，则该插件非常适合您。
它还支持加载在CSS中引用的图像，如background-image、list-style-image等。
$('selector').waitForImages(function() {
alert('All images are loaded.');
});
更多文档可在 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);
Yevgeniy Afanasyev的回答中所提到的，imagesLoaded在这方面做得更好，并且涵盖了您提到的用例以及许多其他边角案例（请参见已解决的github问题）。 - Adriano如果你想要在 $(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");
});
目前为止，所有的答案似乎都没有给出最简单的解决方案。
$('#image_id').load(
function () {
//code here
});
imagesLoaded.js JavaScript 库。$(window).load() 呢？$(window).load() 则目标定位所有资产，包括所有图像、对象、.js 和 .css 文件以及甚至 iframes。最有可能，imagesLoaded 会比 $(window).load() 更快触发，因为它的目标定位了更小的一组资产。$(function() {
var $img = $('img'),
totalImg = $img.length;
var waitImgDone = function() {
totalImg--;
if (!totalImg) alert("Images loaded!");
};
$('img').each(function() {
$(this)
.load(waitImgDone)
.error(waitImgDone);
});
});
使用这种方式，您可以在加载完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();
});
我的解决方案类似于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>
使用已打包的imagesLoaded 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', '...');
});
$("img").load()不起作用吗？ - Lucas