,但我真的不想......" /> ,但我真的不想......"> ,但我真的不想......" />
在 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() { }
内的代码。因此,如果您使用该平台,您将获得我正在寻找的行为,而不是上述正确行为。
$("img").load()
不起作用?
使用 jQuery,您可以使用 $(document).ready()
在加载 DOM 时执行某些操作,并在加载所有其他内容(例如图像)时使用 $(window).on("load", handler)
执行某些操作。
如果您有很多 jollyrogerNN
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 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
等。
waitForImages jQuery 插件
GitHub 存储库。
自述文件。
生产来源。
开发源。
示例用法
$('selector').waitForImages(function() {
alert('All images are loaded.');
});
更多文档可在 GitHub 页面上找到。
('img selector').each(function(index) { var offset = $(this).offset(); ...});
中加载的图像中读取偏移量,但是 offset.top 仍然为零。为什么?
$(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);
Yevgeniy Afanasyev
's answer 中所述,imagesLoaded 在这方面做得更好。涵盖您提到的用例以及许多其他极端情况(see the solved github issues)。
对于那些希望在 $(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 库。
为什么不使用 jQuery 的 $(window).load()?
这是范围的问题。 imagesLoaded 允许您以一组图像为目标,而 $(window).load() 以所有资产为目标——包括所有图像、对象、.js 和 .css 文件,甚至 iframe。最有可能的是,imagesLoaded 将比 $(window).load() 更早触发,因为它针对的是较小的资产集。
使用 imagesloaded 的其他充分理由
IE8+官方支持
许可证:麻省理工学院许可证
依赖:无
重量(缩小和压缩):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
imagesloaded 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/
这样,您可以在加载正文或任何其他容器(取决于您的选择)内的所有图像时执行操作。纯 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();
});
使用 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', '...');
});
我的解决方案类似于 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>
我找到了这个解决方案:@Luca Matteis 这里:https://www.examplefiles.net/cs/508021
但是我稍微编辑了一下,如图:
function showImage(el){
$(el).removeClass('hidden');
$(el).addClass('show');
$(el).prev().removeClass('show');
$(el).prev().addClass('hidden');
}
<img src="temp_image.png" />
<img class="hidden" src="blah.png" onload="showImage(this);"/>