在jQuery中执行此操作：
$(function() {
alert("DOM is loaded, but images not necessarily all loaded");
});
它等待DOM加载并执行您的代码。如果未加载所有图像，则它仍然执行代码。如果我们要初始化任何DOM内容，例如显示或隐藏元素或附加事件，这显然是我们想要的。
让我们说虽然我想要一些动画但我不希望它运行直到所有图像都被加载。 jQuery中是否有正式的方法来执行此操作？
我最好的方法是使用<body onload="finished()">，但我不想这样做，除非我必须这样做。
注意：Internet Explorer中有bug in jQuery 1.3.1实际上等待所有图像在$function() { }内执行代码之前加载。因此，如果您正在使用该平台，您将获得我正在寻找的行为，而不是上述正确的行为。
答案 0 :(得分：1009)
使用jQuery，在加载 DOM 时使用$(document).ready()执行某些操作，并在加载所有其他内容时使用$(window).on("load", handler)执行某些操作，例如图像
如果您有jollyroger个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
<img src="jollyroger99.jpg">
</body>
</html>
这样，在加载图像之前会出现警告框，因为此时DOM已准备就绪。如果你改变了：
$(document).ready(function() {
成：
$(window).on("load", function() {
然后在加载图像之后，才会出现警告框。
因此，要等到整个页面准备就绪，您可以使用以下内容：
$(window).on("load", function() {
// weave your magic here.
});
答案 1 :(得分：155)
我写了一个插件，可以在图像加载元素时触发回调，或者每个图像加载时触发一次。
它类似于$(window).load(function() { .. })，但它允许您定义要检查的任何选择器。如果您只想知道#content（例如）中的所有图片何时加载，那么这就是您的插件。
它还支持加载CSS中引用的图像，例如background-image，list-style-image等。
$('selector').waitForImages(function() {
alert('All images are loaded.');
});
GitHub页面上提供了更多文档。
答案 2 :(得分：48)
$(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);
答案 3 :(得分：19)
对于那些希望获得$(window).load点击后请求的单个图片下载完成通知的用户，您可以使用图片元素的load事件。
e.g：
// 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");
});
答案 4 :(得分：9)
到目前为止，没有一个答案给出了似乎最简单的解决方案。
$('#image_id').load(
function () {
//code here
});
答案 5 :(得分：6)
我建议使用imagesLoaded.js javascript库。
$(window).load()？这是一个范围问题。 imagesLoaded允许您定位一组图像，而
$(window).load()定位所有资产 - 包括所有图像，对象，.js和.css文件，甚至是iframe。最有可能的是，imagesLoaded会比$(window).load()更早触发，因为它定位的资产较少。
答案 6 :(得分：4)
使用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);
});
});
答案 7 :(得分：1)
使用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', '...');
});
答案 8 :(得分：1)
这样，您可以在加载体内或任何其他容器（取决于您的选择）内的所有图像时执行操作。 PURE 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 :(得分：0)
我的解决方案类似于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>