Image delay loading plug-in based on jQuery or Zepto

When our website has too many page images, the loading speed will be slow. In particular, accessing pages with 2G/3G mobile phones is not only slow, but also uses a lot of traffic. Our themes have used the lazy loading form of images before, but none of them is perfect. Some themes also use placeholder images to control lazy loading. Today, we use the lazy loading method of js images. Its principle is to replace all images that need to be loaded in the page with a default image (generally small in size). Only images in the visible area can be loaded, In this way, we should be able to meet our daily needs. Well, let's not talk nonsense first course Try the operation. Later themes will be updated one by one. Don't be impatient!!!

Implementation principle

<img class="lazy" src="loading.png" data-src="img/example.jpg">

When the page is opened, the image in src will be loaded first, that is, a very small loading image; By listening to the scroll event, when the image is in the visual area, replace the src with data src to load the real image.

use

The existing plug-in unit , such as lazyload plug-in.

Lazyload plug-ins can be found on the Internet. The common ones are:
1. Jquery. lazyload. js: Depends on jQuery

 /*!  * Lazy Load - jQuery plugin for lazy loading images *  * Copyright (c) 2007-2015 Mika Tuupola  * * Licensed under the MIT license: *    http://www.opensource.org/licenses/mit-license.php  *  * Project home:  *    http://www.appelsiini.net/projects/lazyload  *  * Version:  1.9.7  *  */

http://www.appelsiini.net/projects/lazyload

2. Lazyload. js: Depends on jQuery or Zepto

 /*!  * An jQuery | zepto plugin for lazy loading images.  * author -> jieyou * see  https://github.com/jieyou/lazyload  * use some tuupola's code  https://github.com/tuupola/jquery_lazyload  (BSD)  * use component's throttle  https://github.com/component/throttle  (MIT)  */

Download: https://github.com/52fhy/lazyload

The usage of the above two is the same. The second one is based on the first modification to support zepto. Now take the second example:

lazyload.js

1. Introduction

 <script src="jQuery.js"></script><script src="lazyload.min.js"></script>

2. Using

 <!-- Lazyload.js default lazy loading original image attribute is data original --><img class="lazy" src="loading. png" data original="img/example. jpg"> $(".lazy").lazyload();

3. Configuration

Default:

 defaultOptions = { Threshold: 0,//How many images are loaded in advance, in px     failure_limit               : 0, Event: 'scroll',//Trigger event Effect: 'show',//effect Effect_params: null,//the parameter array of effect Container: w,//Use the container. The default is window Data_attribute: 'original',//can be changed to src, which corresponds to the data src attribute     data_srcset_attribute       : 'original-srcset',     skip_invisible              : true,     appear                      : emptyFn,     load                        : emptyFn, Vertical_only: false,//used in vertical scrolling pages     check_appear_throttle_time  : 300,     url_rewriter_fn             : emptyFn,     no_fake_img_loader          : false,     placeholder_data_img        : 'data:image/png; base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC',    // for IE6\7 that does not support data image     placeholder_real_img        : ' http://ditu.baidu.cn/yyfm/lazyload/0.0.1/img/placeholder.png ' //Todo: use global to configure some attributes, instead of configuring} YAML copy full screen in $(selector). lazyload ({}) every time }

Example:

 $(function() {   $(".lazy").lazyload({          Effect: "fadeIn",//effect Data_attribute: 'src',//can be changed to src, which corresponds to the data src attribute Event: 'scroll',//default value Container: $(". content"),//It is generally unnecessary to specify, that is, window. Must be specified in the sui frame  }); });

The code recording is completed, and the results will be seen after a few days of testing. If there is no problem, it will be updated one by one. If there is a problem, it depends on the situation. Well, there must be a lot of work after the vacation. Hurry up to work, and leave a message if there is a problem!