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

　For support Retina (retina screen) device

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

Images that need to be delayed loaded

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

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.

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 = '包含  的HTML' html = html.replace(/]+>/g, function(imgstr, idx) { imgstr = imgstr.replace(' src=', ' data-src=') return imgstr })