Generally speaking, the delayed loading of web page images means that when the web page is loaded, the images that should be loaded together are temporarily replaced with small images to reduce the loading volume. When the user browses to the image area, the original image is loaded back (roughly this meaning)! The delayed loading of images is very helpful to improve the loading speed of web pages. At the same time, it is not tedious to implement the delayed loading of website images. Therefore, predecessors have prepared all the work for us.
Common web page:
Download the required jquery.lazyload.js file (there is a download address at the end of the article), and then add the following code before the</head>page:
<script type="text/javascript" src=" http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js "></script> <script type="text/javascript" src="http://your path/js/jquery. lazyload. js"></script> <script type="text/javascript"> jQuery(document).ready( function($){ $(".thumbnail img").lazyload({ placeholder : " http://xx/xx/grey.gif ",//The placeholder image before loading the image, your storage path Effect: "fadeIn"//The effect used to load the picture (fade in) }); }); </script>
Change. tumbnail to the style of your own web page surrounding img images; Create a picture with width and height of 1px in PS, name it grey.gif, place it in the corresponding file directory, and then modify the above http://xx/xx/grey.gif Is the url address of the image.
Zblog blog implementation: (zblog 2.0+version)
Save the js file in the zb_user/theme/theme/script/directory
Add code before</head>in zb_user/theme/topic name/template/header.html;
<script type="text/javascript" src=" http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js "></script> <script src="<#ZC_BLOG_HOST#>zb_users/theme/<#ZC_BLOG_THEME#>/script/jquery.lazyload.js" type="text/javascript"></script> <script type="text/javascript"> jQuery(document).ready( function($){ $(".thumbnail img").lazyload({ placeholder : " http://xx/xx/grey.gif ",//The placeholder image before loading the image, your storage path Effect: "fadeIn"//The effect used to load the picture (fade in) }); }); </script>
