JavaScript & amp; jquery perfectly determines whether the image has been loaded

JavaScript and jquery perfectly determine whether the image has been loaded
I haven't written anything for a long time. Recently, due to work needs, I wrote a program for asynchronous loading of waterfall streams. Today, we will not talk about Waterfall streams. Let's talk about the load issue. ------------------------------------------------------------- As we all know, a common waterfall stream initiates an ajax request when you scroll to the bottom of the browser. After the item list is generated on the server side, it is appended to the corresponding div through js. It looks very simple. The key issue lies in the image loading problem. images are generally stored on servers and downloaded to the client through http. For example, my image address: http://xxx.xxx.com/ SC /item/cover/9-4352-c400.jpg and it takes some time to download the image to the local (fast network ). When the image has not been downloaded, the width and height of the element obtained using js will be 0. --------------------------------------------------------------------- Some students have said that it is not good to use jquery's ready. $ (Document ). ready (function () {// write your code here ...}); if this is easy, let me talk about ready and window. onload. Jquery ready is considered to be loaded after the dom structure is loaded. (The disadvantage is that the image is not loaded, the width and height are 0, and a program error occurs.) js window. onload refers to dom generation and resource loading. For example, if flash and images are fully loaded, onload is executed. (The disadvantage is that when an image is large, it won't stop the normal execution of other js files.) After knowing their differences, let's talk about how to avoid errors and choose to use them. If you are using Baidu, many people will tell you. This way: $ ('img '). load (function () {// Loading completed}); it seems very powerful. In fact, it is not. Its disadvantage is that the callback function is executed once every image is loaded. Okay, it's so annoying. I just want to load it all once. Of course, you can modify it as follows: va imgNum = $ ('img '). length; $ ('img'). load (function () {if (! -- ImgNum) {// Loading completed}); this way, I can load one, and I will use the total number of images to reduce it by one. I will load it as soon as it is reduced to 0. It looks perfect, provided you haven't met IE. IE images are always taken from cached files, which causes the load method to not be executed at all. Only new images are loaded. Are you ready? Continue. --------------------------------------------------------------- Or: document. getElementById ('img '). onload = function () {// Load completed}; Check that my native code is unified across the world, in fact, the effect is very small. You can only process one document at a time, some people say that I can use a loop to bind it. After my test, it seems that it has no effect. Just smile. Check out my final solution (compatible: Google & firefox & IE) --------------------------------------------------------------- when the image is not loaded, the width and height are 0. We can easily determine the loading of images. Copy the code var t_img; // timer var isLoad = true; // control variable // determine the image loading status. After loading is complete, callback isImgLoad (function () {// Loading completed}); // judge the function isImgLoad (callback) of the image loading function {// note that all the image class names are covered, because I only need to process cover. You can ignore other images. // Search for all cover charts, iterative processing $ ('. cover '). each (function () {// set isLoad to false if 0 is found, and exit each if (this. height = 0) {isLoad = false; return false ;}}); // true, no 0 found. After loading, if (isLoad) {clearTimeout (t_img); // clear the timer // callback function callback (); // It is false, because the image that has not been loaded is found, call the timer recursion} else {isLoad = true; t_img = setTimeout (function () {isImgLoad (callback); // recursive scan}, 500 ); // here I set a scan in 500 ms, which can be adjusted by myself }}