Detect page loaded with Javascript
Question
So, I have a portfolio page filled with images that I would like to hide with a mask overlay until all the images have had a chance to finish loading. Is there a way to detect loading finished for all the content on a page?
I would like to find a way to do this, preferably using the jquery library. Any ideas?
7 answers
solution1
6 ACCPTED 2011-03-24 11:42:20
Assuming that the images you want to have finished loading before the overlay is removed all have the class .theImagesToLoad :
// count the number of images
var imageCount = $(".theImagesToLoad").length;
// init a load counter
var loadCounter = 0;
$(".theImagesToLoad").load(function() {
// an image has loaded, increment load counter
loadCounter++;
// remove overlay once all images have loaded
if(loadCounter == imageCount) {
removeOverlay();
}
}).each(function() {
// make sure the `.load` event triggers
// even when the image(s) have been cached
// to ensure that the overlay is removed
if(this.complete) $(this).trigger("load");
});
solution2
3 2011-03-24 11:47:03
You can use the window.onload event, it gets fired when all images have been loaded:
window.onload = function() {
$('#maskoverlay').remove();
}
See here: https://developer.mozilla.org/en/DOM/window.onload
solution3
2 2011-03-24 11:56:23
The jQuery ready event fires when the DOM is ready not when all the images are loaded. You can use the window.onload as suggested before or if you want to use jQuery you can use the load event like this:
$(window).load(function () {
// run code
});
solution4
0 2011-03-24 11:37:10
For document ready use:
$(function(){
// Your code
});
However, you'll have to load the mask in CSS with the page and then use the above function to remove it. You won't be able to create the mask in javascript before all the images have loaded unless you again use javascript to supress the images loading, create your mask, load the images, then remove the mask
solution5
0 2011-03-24 11:39:04
or you could use:
$(document).ready(function(){
//your code
}
Edit
Sorry might have misunderstood you, this plugin might help you:
solution6
0 2011-03-24 11:39:20
i think you can use the onload event for the <body> tag and attach to a function
or you can user the jquery
$(document).ready(function(){
});
solution7
0 2011-03-24 11:53:37
Something like ?
$(function() {
var img = [];
var imgarr = ["image1.png","image2.png", ....];
var imgcount = 0;
var loadTimer;
loadTimer = setInterval(function() {
if(imgcount == imgarr.length){
clearInterval(loadTimer);
// ALL IMAGES ARE DONE LOADING HERE
// use : $(img) to have a JQuery object of the image elements
}
},100);
$(imageContainer).hide();
for(var i=0;i<imgarr.length;i++){
img[i] = new Image();
img.style.display = 'none';
$(img[i]).appendTo(imageContainer);
img[i].src = imgarr[i];
img[i].onload = function() { imgcount++; }
}
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.