On the use and principle analysis of front-end lazy loading (jquery_lazyload)

1. Preface

Sometimes we have this demand, when the page has a lot of pictures, we do not want to load the picture at once, but want to when the browser slide to the specified location and then load, which can save bandwidth, it can also help reduce server load. Then this demand needs to take advantage of lazyload.

Jquery_lazyload.js is an extension based on JQ and needs to be used after the introduction of JQ.

2. Use method 2-1. Introduction of jquery and Lazyload expansion

<script src="jquery-1.11.0.min.js"></script><script src="jquery.lazyload.js?v=1.9.1"></script>

2-2. Specify the tag by class, SRC specify the home in front of the picture, data-original specify the picture after loading.

<img class="lazy" src="img/jd.png" data-original="img/bmw_m1_hood.jpg"><img class="lazy" src="img/jd.png" data-original="img/bmw_m1_side.jpg">

2-3. Passing parameter Bindings lazyload events

<ScriptType="Text/javascript"charset="Utf-8" >$(function() { $("Img.lazy"). Lazyload ({placeholder:"Img/grey.gif",Pre-occupied with picturesplaceholder, the value is a path to a picture. This image is used to occupy the location of the image to be loaded, and when the image is loaded, the bitmap will be hidden//effect:"FadeIn",What effect is loaded in useeffect (special effects), values have show (direct display), FadeIn (Fade in), Slidedown (dropdown), etc., commonly used fadeIn//threshold:200, //start loading //threshold in advance, values are numbers, Represents the height of the page. If set to 200, indicating that the scrollbar starts loading the picture when it is 200 higher than the target position, it can be done without the user noticing the event:  ' click ', //event triggered when //event, value has click (click), mouseover (mouse over), sporty (motion), Foobar (...). You can implement mouse over or click on the image to start loading, the latter two values are not tested ...//container: $ ( "#container"), // The effect of the picture in a container is //container, the value is a container. Lazyload by default when pulling the browser scroll bar, this parameter allows you to load the scroll bar of a div by loading the picture/ /failurelimit: 10 //picture sorting Chaos // Failurelimit, the value is a number. Lazyload by default when it finds the first picture that is not in the visible area, it does not continue to load, but when the HTML container is confusing, the picture in the visible area may not be loaded, Failurelimit is intended to load images outside of the visible area of N to avoid this problem. }); }); </SCRIPT>         

About the use and rationale of front-end lazy loading (jquery_lazyload)