JavaScript & jquery Perfectly determine if the picture is loaded

Source: Internet
Author: User

This article reproduces the place http://www.2cto.com/kf/201409/331234.html

Long time no writing, just recently because of work needs, wrote a waterfall stream asynchronous loading program.

  Don't talk about the waterfall today, let's talk about the load problem.  -------------------------------------------------------------  Well-known, common waterfall streams when the mouse scrolls to the bottom of the browser, An AJAX request will be initiated. After generating the item list on the server, the JS append to the corresponding div inside.   looks very simple, the key problem is the picture loading problem, the picture is generally placed on the server, through HTTP download to the client.   such as my picture address: http://xxx.xxx.com/sc/item/cover/9-4352-c400.jpg  and the picture download to the local is a certain time (speed of passing). When the picture is not finished downloading, use JS to get the element width will be 0.  -------------------------------------------------------------------  Some of my classmates said I used jquery's ready. 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.  jquery's ready is just the structure of the DOM loaded and is considered loaded. (The disadvantage is that the picture is not loaded, the width is 0, the program error)  js window.onload refers to the DOM generation 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)  ------------------------------------------------------------------------ -------------  Know their differences, we'll talk about how to avoid mistakes and selective use.   If you do Baidu, a lot of people will tell you.   this:  $ (' img '). Load (function () { //loading complete    });   seems very powerful, but in fact, his disadvantage is that every load of a picture, The callback function is executed once. All right, too.Tired, I just want to load the whole walk once on it. Of course, you can modify the following:  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, minus 0 I loaded. 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 new images will go to load.   Service? Keep looking down.  ---------------------------------------------------------------  or this:  document.getelementbyid (' img '). Onload=function () {       //loading complete  };   look at my native code eminence, actually very little effect, Can only deal with one at a time you are ready to write how many document, some people say I can use a loop to bind, after my test seems to have no effect.   It's just a smile. Check out 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. The following:  copy code var t_img; Timer var isload = true; The control variable  //determines the picture loading status, the callback Isimgload (function () {   //Loading complete}) after loading, and  //determines the function isimgload of the image load ( Callback) {   //Note My picture class name is cover, because I only need to deal with cover. Other pictures can be used regardless.    //Find all cover drawings, iterate over     $ ('. Cover '). each (function () {       //find is 0 to set Isload to false and exit each        if (this.height = = = 0) {            isload = false;            return False;&nbs P      }   });   //Is true, no discovery is 0. Load complete     if (isload) {        cleartimeout (t_img);//Clear timer        //callback function & nbsp       Callback ();   //is false because a graph has been found that does not load, and will call the timer recursive    }else{      &N Bsp Isload = true;        t_img = setTimeout (function () {            Isimgloa D (callback); Recursive scan        },500); I set the 500 milliseconds to scan once, can adjust their own    }}

JavaScript & jquery Perfectly determine if the picture is finished loading

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.