As we all know, a common waterfall stream when the mouse scrolls to the bottom of the browser, an AJAX request is initiated. After generating the item list on the server, the JS append to the corresponding div inside.
Looks very simple appearance, the key question is on the picture loading question, the picture is generally placed on the server, downloads through the HTTP to the client.
For example, my picture address:
Http://xxx.xxx.com/sc/item/cover/9-4352-c400.jpg
It takes some time for the pictures to be downloaded to the local network (fast passing through). When the picture is not finished downloading, use JS to get the element width will be 0.
-------------------------------------------------------------------
Some students said I use jquery's ready not good. As follows:
$ (document). Ready (function () {
Write your code here ...
});
If it's that simple, I'll just say the difference between ready and window.onload.
The ready for jquery is just the structure of the DOM loaded, and it is considered to be loading complete. (The disadvantage is that the picture is not loaded, the width height is 0, the program error)
JS Window.onload refers to the creation of the DOM and the loading of resources, such as Flash, the picture is fully loaded before the onload execution. (The disadvantage is that when a picture is large, it will not prevent the normal execution of other JS)
-------------------------------------------------------------------------------------
After knowing their differences, let's talk about how to avoid mistakes and selective use.
If you do Baidu, a lot of people will tell you.
Such
$ (' img '). Load (function () {
Load complete
});
It seems to be very powerful, but in fact, his disadvantage is that every time a picture is loaded, the callback function executes once. Well, it's annoying, I just want to load it all up and walk once. Of course, you can make the following changes:
VA imgnum=$ (' img '). length;
$ (' img '). Load (function () {
if (!--imgnum) {
Load complete
}
});
This is always OK, I loaded a picture, the total number of pictures to reduce one, reduced to 0 I loaded the complete. It looks perfect, if you don't meet IE.
IE pictures are always taken from the cache file, which causes the load method to not execute at all, only the new pictures will go to load.
Do you have a coat? Keep looking down.
---------------------------------------------------------------
Or something like this:
document.getElementById (' img '). Onload=function () {
Load complete
};
Look at my native code eminence, actually very little effect, can only handle one at a time you are ready to write how many document, some people say I can use the loop to bind, after my test seems to have no effect.
It's just a smile. See my Final Solution (compatible: Google & Firefox &ie)
-------------------------------------------------------------
The width height is 0 when the picture is not loaded. It's easy to judge a picture loading situation. As follows:
Copy Code
var t_img; Timer
var isload = true; Control variables
Determine picture loading status, callback after loading completed
Isimgload (function () {
Load complete
});
Determine the function of picture loading
function Isimgload (callback) {
Note that my picture class name is cover, because I only need to deal with cover. Other pictures can be used regardless.
Find all cover drawings, iterative processing
$ ('. Cover '). each (function () {
When found, set Isload to False for 0 and exit each
if (this.height = = = 0) {
Isload = false;
return false;
}
});
Is true, no discovery is 0. Load complete
if (isload) {
Cleartimeout (T_IMG); Clear Timer
callback function
Callback ();
is false, because a diagram is found that does not have a completed load, the call timer is recursive
}else{
Isload = true;
t_img = SetTimeout (function () {
Isimgload (callback); Recursive scan
},500); I set this here is 500 milliseconds to scan once, can adjust themselves
}
}
JavaScript & jquery Perfectly determine if the picture is loaded
