Image Lazy Load: Those open source plug-ins (jQuery) that delay loading images

The image delayed loading technology is very practical for websites with high traffic. Currently, images are widely used in websites. If they are not processed, they will put great pressure on the server and bandwidth. By only rendering images in the area visible to the current user, you can greatly reduce the number of website requests and reduce network bandwidth resources.

　unveil

　This is a very lightweight short-time image loading component

It supports modern browsers and IE7+, and there are nearly 3K stars (follows) on Github

　Use

General pictures

<img  src="/static/imghwm/default1.png"  data-src="bg.png"  class="lazy"   data- / alt="Image Lazy Load: Those open source plug-ins (jQuery) that delay loading images" >

　For support Retina (retina screen) device

<img  src="/static/imghwm/default1.png"  data-src="bg.png"  class="lazy"   data- data-src-retina="img2-retina.jpg" / alt="Image Lazy Load: Those open source plug-ins (jQuery) that delay loading images" >

Application

$(document).ready(function() {
  $("img").unveil();
});

Support callback

$("img").unveil(200, function() {
  $(this).load(function() {
    this.style.opacity = 1;
  });
});

Support manual trigger

$("img").trigger("unveil");

jquery_lazyload

Can delay loading of images of large websites, and then render when scrolling to the area. There are 4K followers on Github.

Use

Reference jQuery and lazyload.js

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.lazyload.js" type="text/javascript"></script>

Images that need to be delayed loaded

<img  class="lazy lazy"  src="/static/imghwm/default1.png"  data-src="img/blank.gif"   data-original="img/example.jpg"    style="max-width:90%"  style="max-width:90%" alt="Image Lazy Load: Those open source plug-ins (jQuery) that delay loading images" >

Apply

$(function() {
    $("img.lazy").lazyload();
});

echo

An independent logo-type JavaScript image delayed loading library. Does not rely on jQuery, only 2K after compression.

　 Support IE8+

Use

  <img  class="lazy lazy" src="/static/imghwm/default1.png" data-src="img/blank.gif" alt="Image Lazy Load: Those open source plug-ins (jQuery) that delay loading images" >
  <script></script>
  <script>
  echo.init({
    offset: 100,
    throttle: 250,
    unload: false,
    callback: function (element, op) {
      console.log(element, &#39;has been&#39;, op + &#39;ed&#39;)
    }
  });
  // echo.render(); //手动触发调用
  </script>

layzr.js

An Image Lazy Loading component just released a few days ago, which is small, fast and has no dependencies (does not rely on jQuery), and also supports retina devices.

<script src="layzr.min.js"></script>
<img  src="/static/imghwm/default1.png"  data-src="optional/placeholder"  class="lazy"   data-layzr="normal/image" data-layzr-retina="optional/retina/image" alt="Image Lazy Load: Those open source plug-ins (jQuery) that delay loading images" >
<script>
var layzr = new Layzr({ 
 attr: &#39;data-layzr&#39;, 
 retinaAttr: &#39;data-layzr-retina&#39;, 
 threshold: 0, 
 callback: null 
});
</script>

Updated

So, how to let the server convert a bunch of img in HTML into data-src? In fact, it is very simple, just a few lines of regular rules are enough. For example, in node.js, you can convert img's src into data-src (you can directly press F12 to run it in the browser's Console)

var html = &#39;包含 <img  src="/static/imghwm/default1.png"  data-src="http://ourjs.com/img/weixin.jpg"  class="lazy"   alt="Image Lazy Load: Those open source plug-ins (jQuery) that delay loading images" > 的HTML&#39;
html = html.replace(/<img [^ alt="Image Lazy Load: Those open source plug-ins (jQuery) that delay loading images" >]+>/g, function(imgstr, idx) {
  imgstr = imgstr.replace(&#39; src=&#39;, &#39; data-src=&#39;)
  return imgstr
})