Lazy loading of images

Image lazy loading, or lazy loading of images, improves web page loading speed and helps reduce server load

Support mainstream browsers, note: Internet Explorer 10 does not support the following click “view demo”, you can preview the effect of the plug-in online, click “Download now”, you can download the plug-in

Use steps:

  1. Download the plug-in and unzip it
  2. Find the easyLazyload. js file inside and import it into an HTML page that requires lazy loading of images
  3. Replace image SRC with data-lazy-src, as in:<img data-lazy-src="..." />
  4. Call the global method,lazyLoadInit()

Note: before introducing easyLazyload. js, you need to reference jquery && Zepto, which needs to be run under open service

Call example:

<script>
    lazyLoadInit({
        coverColor:"white".coverDiv:"<h1>test</h1>".offsetBottom:0.offsetTopm:0.showTime:1100.onLoadBackEnd:function(i,e){
            console.log("onLoadBackEnd:"+i); },onLoadBackStart:function(i,e){
            console.log("onLoadBackStart:"+i); }}); </script>Copy the code

Parameter Description:

  • CoverColor: The color of the overlay when the image is about to be displayed
  • CoverDiv: Soil custom component that overlay can display when the image is about to be displayed
  • OffsetBottom: The distance between the image and the point at which it appears at the bottom of the screen. (Note: Lazy loading images occur when the top of the image touches the bottom of the screen. Set this value if you want the top of the image to appear at some distance from the bottom of the screen.)
  • OffsetTopm: The distance between the image and the point at which it appears at the bottom of the screen.
  • OnLoadBackEnd: a callback function for when the image has fully appeared, taking (index, event) the loaded image subscript and dom objects (dom objects are JqueryDOM or ZeptoDOM objects)
  • OnLoadBackStart: callback function when the image has been downloaded and is about to be displayed.

Download address of this plug-in:

www.jq22.com/jquery-info…