官方的方式要求jQuery等待所有的图像加载之前执行的东西
在jQuery中，当你这样做：
$(function() { alert("DOM is loaded, but images not necessarily all loaded"); }); 它等待DOM加载并执行你的代码。 如果所有的图像都没有加载，那么它仍然会执行代码。 这显然是我们想要的，如果我们正在初始化任何DOM的东西，如显示或隐藏元素或附加事件。
让我们说虽然我想要一些animation，我不希望它运行，直到所有的图像加载。 有没有官方的方式在jQuery做到这一点？
我最好的办法是使用<body onload="finished()"> ，但是除非必须，否则我不想那样做。
注意：Internet Explorer 中的jQuery 1.3.1存在一个bug，在执行$function() { }内的代码之前，实际上会等待所有图像加载。 所以，如果你使用的平台，你会得到我正在寻找的行为，而不是上述正确的行为。
使用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. });
我写了一个插件，可以在图片加载元素时触发callback，或者在加载图片时触发一次。
它类似于$(window).load(function() { .. }) ，除了它可以让你定义任何select器来检查。 如果您只想知道何时加载了#content （例如）中的所有图像，则这是您的插件。
它还支持加载CSS中引用的图像，如background-image ， list-style-image等。
waitForImages jQuery插件
- GitHub仓库 。
- 自述文件 。
- 生产来源 。
- 开发源码 。
用法示例
$('selector').waitForImages(function() { alert('All images are loaded.'); });
例如jsFiddle 。
更多的文档可以在GitHub页面上find。
$(window).load()只能在第一次加载页面时使用。 如果你正在做dynamic的东西（例如：点击button，等待一些新的图像加载），这是行不通的。 为了达到这个目的，你可以使用我的插件：
演示
下载
/** * 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激活后获取请求的单个图像的下载完成通知的用户，可以使用图像元素的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 });
我会build议使用imagesLoaded.js JavaScript库。
为什么不使用jQuery的$(window).load() ？
这是一个范围的问题。 imageLoaded允许您定位一组图像，而
$(window).load()定位所有资源 – 包括所有图像，对象，.js和.css文件，甚至是iframe。 最有可能的是，imagesLoaded会比$(window).load()更早触发，因为它定位的是一组较小的资产。
其他很好的理由使用图片加载
- 正式支持IE8 +
- 许可证：MIT许可证
- 依赖关系：无
- 体重（缩小和gzipped）：7kb缩小（轻！）
- 下载build设者（有助于减肥）：没有必要，已经很小
- 在Github上：是的
- 社区和贡献者：相当大，超过4000个成员，尽pipe只有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
- imagesloadedloaded JavaScript库：什么是浏览器和设备的支持？
随着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/
使用imagesLoaded PACKAGED v3.1.8（最小化时为6.8 Kb）。 这是比较旧的（2010年以来），但仍然活跃的项目。
你可以在github上find它： https ： //github.com/desandro/imagesloaded
他们的官方网站： http : //imagesloaded.desandro.com/
为什么它比使用更好：
$(window).load()
因为你可能想要dynamic加载图像，像这样： jsfiddle
$('#button').click(function(){ $('#image').attr('src', '...'); });
这样，当身体或任何其他容器（取决于您的select）中的所有图像加载时，您可以执行一个操作。 纯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(); });
我的解决scheme类似于molokoloco 。 写成jQuery函数：
$.fn.waitForImages = function (callback) { var $img = $('img', $(this)), totalImg = $img.length; var waitImgLoad = function () { totalImg--; if (!totalImg) { callback(); } }; $img.load(waitImgLoad) .error(waitImgLoad); };
例：
<div> <img src="img1.png"/> <img src="img2.png"/> </div> <script> $('div').waitForImages(function () { console.log('img loaded'); }); </script>
