As we all know, a common waterfall flow will initiate an ajax request when the mouse scrolls to the bottom of the browser. After generating the item list on the server, append it to the corresponding div via js.
It looks very simple, and the key problem lies in the loading of the image. The image is usually placed on the server and downloaded to the client through http.
For example, my image address:
/sc/item/cover/
It takes a certain amount of time to download the picture locally (the internet speed passes by quickly).When the image has not been downloaded, the width and height of the element obtained using js will be 0。
Some students said that I wouldn't just use jquery's ready.as follows：
$(document).ready(function(){
// Write your code here...});
It would be great if it was that simple, let me talk about the difference between ready and ready.
jquery's ready is just the dom structure loaded, and it is considered to be loaded.. (The disadvantage is that the picture has not been loaded, the width and height are 0, and the program has an error)
js refers to the generation of dom and the loading of resources, such as flash and image are fully loaded before the execution of onload.(The disadvantage is that when a certain image is large, will it prevent the normal execution of other js?)
After knowing their differences, let’s talk about how to avoid errors and selective use.
If you do Baidu, many people will tell you.
so:
$('img').load(function(){
// Loading is complete});
It seems to be very powerful, but in fact, it is not the case. Its disadvantage is that the callback function is executed once every time a picture is loaded. Well, it's so annoying, I just want to load it all and leave once. Of course, you can modify it as follows:
va imgNum=$('img').length;
$('img').load(function(){
if(!--imgNum){
// Loading is complete }
});
This is OK. I load one, and I use the total number of pictures to subtract one. If I reduce it to 0, I will load it. It looks perfect, provided you don't encounter IE.
IE pictures are always taken from cache files, which causes the load method to not be executed at all. Only new pictures will be loaded.。
Am I convinced? Keep reading.
Or this is it:
('img').onload=function(){
// Loading is complete};
It seems that my native code is the only way to dominate the world. It can only handle one document at a time. Some people say that I can use a loop to bind it, but after my test, it seems that there is no effect at all.
Just smile. Check out my final solution (compatible: Google & Firefox & IE)
When the image is not loaded, the width and height are 0. It is easy to judge a picture loading situation. as follows:
var t_img; // Timervar isLoad = true; // Control variables//Judge the loading status of the image and callback after the loading is completedisImgLoad(function(){
// Loading is complete});
// Function to determine the loading of the picturefunction isImgLoad(callback){
// Note that my image class names are covered, because I only need to deal with coverage. You can ignore other pictures. // Find all cover images and iterate $('.cover').each(function(){
// If you find it as 0, set isLoad to false and exit each if( === 0){
isLoad = false;
return false;
}
});
// is true, no 0 was found. Loading completed if(isLoad){
clearTimeout(t_img); // Clear the timer // Callback function callback();
// is false, because the graph that has not been loaded is found, the timer will be called recursively }else{
isLoad = true;
t_img = setTimeout(function(){
isImgLoad(callback); // Recursive scan },500); // What I set here is to scan it once in 500 milliseconds, you can adjust it yourself }
}
After reading my code, do you have your own ideas?
The above is all the content of this article. I hope that the content of this article will help you study or work. I also hope to support me more!