{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 时光不老，我们不散 的问题《Recall window load event - javascript》','https://www.manongdao.com/q-1288928.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
I am going to do my best here to distinctly explain what my issue is without the use of jsfiddle because $(window).on("load") does not fire within their IDE.
I have a html 'wrapper' which dynamically loads (ajax) html into div.content.
<body>
<div class="header"></div>
<div class="overlay"></div>
<div class="loader hidden" align="center">
<img src="images/loading.gif" />
</div>
<!-- Container for the content -->
<div class="content">
<!-- dynamic content appears here -->
</div>
<div class="footer"></div>
</body>
At the start of a new piece of content being loaded, I toggle the visibility between the loading gif and the content div.
$(".content").toggleClass("hidden", true);
$(".loader").toggleClass("hidden", false);
At the end of the loading /ajax process I have the following code:
$(".content").load("screens/"+this.currentScreen+"/"+this.currentScreen + ".html .screen", function( response, status, xhr )
{
//other code
//
//
$(window).on("load", function() {
$(".content").toggleClass("hidden", false);
$(".loader").toggleClass("hidden", true);
});
});
I chose $(window).on("load") because I only want div.content to be visible again once all the images have finished loading, as opposed to $(document).ready().
For the first piece of content to be loaded, this works perfectly. However for the second piece of content, the $(window).on("load") event never fires.
I have a hunch that this event is not allowed to be invoked a second time, or maybe it is unbound after being called?
I tried triggering / invoking the method but to no avail.
if((window.onload) === null)
{
$(window).on("load", function() {
console.log("$(window).on('load') called");
$(".content").toggleClass("hidden", false);
$(".loader").toggleClass("hidden", true);
});
}
else
{
$(window).trigger("load");
}
Also, I assure everyone that it isn't the content being loaded, because if I replace $(window).on("load") with $(document).ready() it works fine. I just desperately want to wait for the new images to have loaded.
How can I achieve this?
The window's load event only executes once. Even when you dynamically add content, it will not be triggered. This behaviour is indeed different from
ready(), where jQuery will call the callback always, even if the document is ready when it meets this code for the first time.When adding content dynamically there is no "one-liner" to get a callback run when all images of that content have been loaded. The code you would need to write, would have to capture the
loadevent for every image you load, and see which one was last, also taking care of images that did not load (because of an invalid reference, or they were cached).The ImagesLoaded Plug-in provides a method that does all that. You can use it like this:
So I would suggest to just include that plug-in, like this:
and use the
imagesLoaded()method, like above code.