There has always been a problem with Teacher Pan’s blog.The thumbnail of the article list will not be displayed normally when visiting the homepage.The reason is that the template developer uses the jquery.lazyload.jsdelayed loading technology based on the delay, but there is a problem with the configuration during use.The picture is obviously not displayed in the visible area, and it will not be loaded until the scroll bar is scrolled down a lot.Therefore, Mr.Pan studied getting off the car and finally found the problem and solved it successfully. Since the original js is a compressed version, it needs to be formatted and debugged to see which line it is.After crazy debugging through the browser F12, I finally found the location of the delayed-loading code.F12 debugging diagram: found the code diagram: after a while Search and find that there is an attribute that has a great impact on this problem, that is, the attribute.Change the code to the following to solve the problem:





failure_limit

$ ( "img" ). lazyload ({
       //Fade, show (direct display), fadeIn (fade in), slideDown (drop down)
       effect : "fadeIn" ,  
       //Preload, load in advance when the picture is 180px away from the screen
       threshold : 180 ,  　　
       failure_limit : 50 
 });

That failure_limit in the end what role it?

Because there is a Lazy Load cycle lookup imgmechanism, according to the layout of the HTML document look from top to bottom, does not show when it finds the first loaded img, it will stop searching down. (In fact, it is to search for the object (group) of $("img") in order).

And now website design will use a lot of positioning styles, such as: float and position, so there is a big difference in the browser rendered HTML document layout effects and the DOM order, which would be a case, a img label It has appeared on the screen, but it cannot be displayed! Because its actual position in the HTML document is arranged imgbehind the tags that have not yet been displayed , which will cause the tag displayed on the screen to imgfail to load the corresponding image.

Lazy Load When it finds the first non-display ofthe label and look for has been terminated, and did not continue the walk down, so there's a situation I encountered, and that the solution is very simple, we can in the original Add the failure_limitattribute directly to the code and set the value to be relatively large.For example, mine needs to be set to 50, so that Lazy Load will find the 50th undisplayedlabel. When there are many pictures and a complicated layout, failure_limit has a great effect, especially when your website layout is "abnormal", you can basically solve the problem by adjusting the value higher.