blocks|key|1547329|text|如果您不想检查所有图像，但要检查特定的图像(例如，在DOM完成后动态替换的图像)您可以使用以下命令：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1547330|$('#myImage').attr('src',+'image.jpg').on("load",+function()+{++
++alert('Image+Loaded');++
});++|code-block|syntax|javascript|1547331|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

If you want to check for not all images, but a specific one (eg. an image that you replaced dynamically after DOM is already complete) you can use this:

<pre><code>$('#myImage').attr('src', 'image.jpg').on("load", function() { 
 alert('Image Loaded'); 
}); 
</code></pre>

blocks|key|1332200|text|根据this+answer，您可以在window对象上使用jQuery+load+event，而不是document|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1332201|jQuery(window).load(function()+{
++++console.log("page+finished+loading+now.");
});|code-block|syntax|javascript|1332202|这将在页面上的所有内容加载完成后触发。这与jQuery(document).load(...)不同，后者是在DOM加载完成后触发的。|1332203|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/a/545005/3715|1|http://api.jquery.com/load-event/^0|I|6|1E|8|2|B|0|T|H|1|0|0|L|Q|0^^$0|@$1|2|3|4|5|6|7|W|8|@$9|X|A|Y|B|C]|$9|Z|A|10|B|C]]|D|@$9|11|A|12|1|13]|$9|14|A|15|1|16]]|E|$]]|$1|F|3|G|5|H|7|17|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|18|8|@$9|19|A|1A|B|C]]|D|@]|E|$]]|$1|M|3|-4|5|6|7|1B|8|@]|D|@]|E|$]]]|N|$O|$5|P|Q|R|E|$S|T]]|U|$5|P|Q|R|E|$S|V]]]]

As per <a href="https://stackoverflow.com/a/545005/3715">this answer</a>, you can use the <a href="http://api.jquery.com/load-event/" rel="nofollow noreferrer">jQuery load event</a> on the <code>window</code> object instead of the <code>document</code>:

<pre><code>jQuery(window).load(function() {
 console.log("page finished loading now.");
});
</code></pre>

This will be triggered after all content on the page has been loaded. This differs from <code>jQuery(document).load(...)</code> which is triggered after the DOM has finished loading.

blocks|key|1332152|text|如果你需要一个跨浏览器的解决方案，imagesLoaded插件是个不错的选择|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1332153|+$("<img>",+{src:+'image.jpg'}).imagesLoaded(+function(+$images,+$proper,+$broken+){
+if($broken.length+>+0){
+//Error+CallBack
+console.log('Error');
+}
+else{
+//+Load+CallBack
+console.log('Load');
+}
+});|code-block|syntax|javascript|1332154|如果你只需要一个IE+WorkAround，这就可以了|1332155|+var+img+=+$("<img>",+{
++++error:+function()+{console.log('error');+},
++++load:+function()+{console.log('load');}
++++});
++img.attr('src','image.jpg');|1332156|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/desandro/imagesloaded^0|H|C|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@$A|V|B|W|1|X]]|C|$]]|$1|D|3|E|5|F|7|Y|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|Z|8|@]|9|@]|C|$]]|$1|K|3|L|5|F|7|10|8|@]|9|@]|C|$G|H]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|C|$]]]|N|$O|$5|P|Q|R|C|$S|T]]]]

<a href="https://github.com/desandro/imagesloaded" rel="nofollow">imagesLoaded</a>
 Plugin is way to go ,if you need a crossbrowser solution

<pre><code> $("&lt;img&gt;", {src: 'image.jpg'}).imagesLoaded( function( $images, $proper, $broken ){
 if($broken.length &gt; 0){
 //Error CallBack
 console.log('Error');
 }
 else{
 // Load CallBack
 console.log('Load');
 }
 });
</code></pre>

If You Just Need a IE WorkAround,This Will Do

<pre><code> var img = $("&lt;img&gt;", {
 error: function() {console.log('error'); },
 load: function() {console.log('load');}
 });
 img.attr('src','image.jpg');
</code></pre>

blocks|key|1547395|text|现在ahpi.imgload.js插件上有一条说明，说它目前已经坏了，现在就试试这个要点：https://gist.github.com/797120/7176db676f1e0e20d7c23933f9fc655c2f120c58|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1547396|entityMap|0|LINK|mutability|MUTABLE|url|https://gist.github.com/797120/7176db676f1e0e20d7c23933f9fc655c2f120c58^0|19|1Z|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

There's a note on the ahpi.imgload.js plugin at the moment saying that it is currently broken, and to try this gist instead:
<a href="https://gist.github.com/797120/7176db676f1e0e20d7c23933f9fc655c2f120c58" rel="nofollow">https://gist.github.com/797120/7176db676f1e0e20d7c23933f9fc655c2f120c58</a>

blocks|key|1547590|text|对于同源图像，您可以使用：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1547591|$.get('http://www.your_domain.com/image.jpg',+imgLoaded);

function+imgLoaded(){
++++console.log(this,+'loaded');
}|code-block|syntax|javascript|1547592|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<h3>For same-origin images, you could use:</h3>
<pre><code>$.get('http://www.your_domain.com/image.jpg', imgLoaded);

function imgLoaded(){
 console.log(this, 'loaded');
}
</code></pre>

blocks|key|1332104|text|也许这个插件可能会有用：http://www.farinspace.com/jquery-image-preload-plugin/|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1332105|entityMap|0|LINK|mutability|MUTABLE|url|http://www.farinspace.com/jquery-image-preload-plugin/^0|C|1I|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

maybe this plugin may be useful: <a href="http://www.farinspace.com/jquery-image-preload-plugin/" rel="nofollow">http://www.farinspace.com/jquery-image-preload-plugin/</a>

blocks|key|1332205|text|++function+CheckImageLoadingState()
++{
+++++var+counter+=+0;
+++++var+length+=+0;

+++++jQuery('#siteContent+img').each(function()+
+++++{
++++++++if(jQuery(this).attr('src').match(/(gif%7Cpng%7Cjpg%7Cjpeg)$/))
++++++++++length%2B%2B;
+++++});

+++++jQuery('#siteContent+img').each(function()+
+++++{++
++++++++if(jQuery(this).attr('src').match(/(gif%7Cpng%7Cjpg%7Cjpeg)$/))
++++++++{
+++++++++++jQuery(this).load(function()+
+++++++++++{
+++++++++++}).each(function()+{
++++++++++++++if(this.complete)+jQuery(this).load();
++++++++++++});
++++++++}
++++++++jQuery(this).load(function()
++++++++{
+++++++++++counter%2B%2B;
+++++++++++if(counter+===+length)+
+++++++++++{++
++++++++++++++//function+to+call+when+all+the+images+have+been+loaded
++++++++++++++DisplaySiteContent();
+++++++++++}
++++++++});
+++++});
++}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1332206|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code> function CheckImageLoadingState()
 {
 var counter = 0;
 var length = 0;

 jQuery('#siteContent img').each(function() 
 {
 if(jQuery(this).attr('src').match(/(gif|png|jpg|jpeg)$/))
 length++;
 });

 jQuery('#siteContent img').each(function() 
 { 
 if(jQuery(this).attr('src').match(/(gif|png|jpg|jpeg)$/))
 {
 jQuery(this).load(function() 
 {
 }).each(function() {
 if(this.complete) jQuery(this).load();
 });
 }
 jQuery(this).load(function()
 {
 counter++;
 if(counter === length) 
 { 
 //function to call when all the images have been loaded
 DisplaySiteContent();
 }
 });
 });
 }
</code></pre>

blocks|key|1547598|text|$(+"img.photo"+).load(function()+{

++++$(".parrentDiv").css('height',$("img.photo").height());
++++//+very+simple

});+|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1547599|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>$( "img.photo" ).load(function() {

 $(".parrentDiv").css('height',$("img.photo").height());
 // very simple

}); 
</code></pre>

blocks|key|1332313|text|我创建了自己的脚本，因为我发现许多插件都相当臃肿，我只是想让它以我想要的方式工作。Mine检查是否每个图像都有一个高度(原生图像高度)。我将其与$(window).load()函数结合使用，以解决缓存问题。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1332314|我对它进行了大量的代码注释，所以即使你不使用它，看起来也应该很有趣。它非常适合我。|1332315|不用再多说了，这里就是：|1332316|imgLoad.js+script|offset|length|1332317|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/JohnnyBash/imgLoad^0|0|0|0|0|H|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|T|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|U|8|@]|9|@$H|V|I|W|1|X]]|A|$]]|$1|J|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|K|$L|$5|M|N|O|A|$P|Q]]]]

I created my own script, because I found many plugins to be quite bloated, and I just wanted it to work the way I wanted. Mine checks to see if each image has a height (native image height). I've combined that with the $(window).load() function to get around the issues of caching. 

I've code commented it quite heavily, so it should be interesting to look at, even if you don't use it. It works perfectly for me. 

Without further ado, here it is:

<a href="https://github.com/JohnnyBash/imgLoad" rel="nofollow">imgLoad.js script</a>

blocks|key|1547747|text|window.load+=+function(){}|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1547748|它被所有的浏览器完全支持，并且当所有的图像都被完全加载时，它会触发一个事件。|1547749|https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload|1547750|entityMap|0|LINK|mutability|MUTABLE|url^0|0|Q|0|0|0|23|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|T|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|U|8|@]|D|@$9|V|A|W|1|X]]|E|$]]|$1|J|3|-4|5|6|7|Y|8|@]|D|@]|E|$]]]|K|$L|$5|M|N|O|E|$P|I]]]]

<code>window.load = function(){}</code>

Its fully supported by all browsers, and it will fire an event when all images are fully loaded.

<a href="https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload" rel="nofollow noreferrer">https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload</a>

Is it possible to detect when all images are loaded via a jQuery event?

Ideally, there should be a 

<pre><code>$(document).idle(function()
{
}
</code></pre>

or

<pre><code>$(document).contentLoaded(function()
{
}
</code></pre>

But I can't find such a thing. 

I thought of attaching an event like this:

<pre><code>$(document).ready(function()
{
 var imageTotal = $('img').length;
 var imageCount = 0; 
 $('img').load(function(){if(++imageCount == imageTotal) doStuff();});
}
</code></pre>

But will this break if an image fails to load? It's critically important for the method to be called, and at the right time.

jQuery event for images loaded

jQuery

是否可以通过jQuery事件检测到何时加载了所有图像？理想情况下，应该有一个$(document).idle(function(){}或$(document).contentLoaded(function(){}但我找不到这样的东西。我想像这样附加一个事件：$(document).ready(function(){    var imageTotal = $('img').length;    v

问已加载图像的jQuery事件
EN

回答 10

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问已加载图像的jQuery事件EN

回答 10

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问已加载图像的jQuery事件
EN