Analysis of the code can also be known.
The main reason is written on the page of the Once loaded, go to the server to apply for picture address, load large picture.
If you want to achieve the original effect, the address to be loaded on the page must not be the address of the large picture, and we can store the real picture address data in the ALT attribute.
The correct example is as follows:
Copy Code code as follows:
<a href= "#nogo" ></a>
<a href= "#nogo" ></a>
We also need to make a little change to the original jquery.lazyload.js:
Copy Code code as follows:
<script type= "Text/javascript" src= "Http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" ></ Script>
<script type= "Text/javascript" src= "Lazyload.js" ></script>
<script type= "Text/javascript" >//Initialization code
$ (document). Ready (function () {
$ ("#lazy1 img, #lazy2 img"). Lazyload ({
PLACEHOLDER: "Yun_qi_img/spacer.gif",
Effect: "FadeIn"
});
});
</script>
The complete example is as follows:
Copy Code code as follows:
<! DOCTYPE html>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 ">
<title> Untitled Document </title>
<style type= "Text/css" >
img{Display:block; border:2px solid #ccc; margin:0 0 10px;}
</style>
<script type= "Text/javascript" src= "Http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" ></ Script>
<script type= "Text/javascript" src= "Lazyload.js" ></script>
<script type= "Text/javascript" >//Initialization code
$ (document). Ready (function () {
$ ("#lazy1 img, #lazy2 img"). Lazyload ({
PLACEHOLDER: "Yun_qi_img/spacer.gif",
Effect: "FadeIn"
});
});
</script>
<body>
<div style= "height:900px; width:400px; Background: #eee; " >
<a href= "#nogo" ></a>
The first screen height is 900px, when scrolling to the following, the corresponding picture began to load
</div>
<div id= "lazy1" style= "width:350px; margin-bottom:340px; " >
<a href= "#nogo" ></a >
<a href= "#nogo" >< /a>
<a href= "#nogo" >< /a>
</div>
<div id= "Lazy2" style= "width:350px;" >
<a href= "#nogo" >< /a>
<a href= "#nogo" >< /a>
<a href= "#nogo" >< /a>
<a href= "#nogo" >< /a>
<a href= "#nogo" >< /a>
<a href= "#nogo" >< /a>
</div>
</body>
Tests are known to be true on-demand loading. Rather than like before, load first, scroll to the corresponding position and then load again.
The Firebug's eyes are still discerning.
