Using jquery lazyload to implement picture lazy loading

Instructions for use

0. Preparatory work

Download jquery and Lazyload plugins (address above)

1. HTML

Introducing jquery libraries and lazyload plugins

1    <DivID= "Imagescontainer"></Div>2     <!-- "" "height=" > " -3     <Scriptsrc= "Http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"type= "Text/javascript"></Script>4     <Scriptsrc=".. /.. /lib/jquery.lazyload.js "></Script>

2. Writing JavaScript

1$(function () {2 3             varImages = [4' Https://unsplash.ict/750/450?image=55 ',//wrong address; no picture returned5' https://unsplash.it/750/450?image=155 ',6' https://unsplash.it/750/450?image=255 ',7' https://unsplash.it/750/450?image=355 ',8' https://unsplash.it/750/450?image=455 ',9' https://unsplash.it/750/450?image=555 ',Ten' https://unsplash.it/750/450?image=655 ', One' Https://unsplash.it/750/450?image=5 ' A             ], -i =Images.length, -$container = $ (' #imagesContainer '), thePlacerhold = '. /layzr.js/placerhold.gif ', //Picture not displayed before loading, if not set, gray will be displayed by default  - imgtemp; -  -              while(i--) { +Imgtemp =Images.shift (); -$container. Append ('  ') +             } A  at$ (' Img.lazy '). Lazyload ({ -Effect: ' FadeIn '//Custom Display effect (JQuery effect) -, Failure_limit:10 -, threshold:200//when the image is 200 pixels away, the image starts to load.  -, event: ' Scroll ' -             }); in  -             //Custom Trigger Events to             //$ ("Img.lazy"). Lazyload ({event: "click"}); +});

3. Some considerations

3.1 You must set the size of the picture (inline style or external CSS is OK), otherwise the plugin may not achieve the desired effect

3.2 You can set a countdown to load a picture after a specified time

Using jquery lazyload to implement picture lazy loading