Image delay loading technology is very useful for large-volume websites. At present, the image is used extensively in the website, if not added to the server and bandwidth will cause a lot of pressure, by only rendering the image of the current user visible area, can greatly reduce the number of requests for the site, reduce network bandwidth resources.
Unveil
This is a very lightweight piece of picture loading component
Supports modern browsers and ie7+, with nearly 3K star on GitHub (attention)
Use
General picture
For retina (Retina screen) enabled devices
Application
$ (document). Ready (function () {$ ("img"). unveil ();});
Support callbacks
$ ("img"). Unveil ($, function () {$ (this). Load (function () {this.style.opacity = 1; });});
Supports manual triggering
$ ("img"). Trigger ("unveil");
Jquery_lazyload
Images of large Web sites can be loaded lazily, and then rendered when scrolling to areas. There are 4K of concerns on GitHub.
Use
Quoting 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 loaded lazily
Application
$ (function () {$ ("Img.lazy"). Lazyload ();});
Echo
An independent emblem type JavaScript image delay loading library. Do not rely on jquery, only 2K after compression.
Support ie8+
Use
<body> <script src= "Dist/echo.js" > </script> <script> echo.init ({offset:100, throttle:250, Unload:false, Callback:function (el Ement, op) {console.log (element, ' has been ', op + ' ed ')}); Echo.render (); Manual Trigger Call </script></body>
Layzr.js
Just a few days ago, an image Lazy loading component, small, fast, and non-dependent (not dependent on jquery), also supports retina devices.
<script src= "Layzr.min.js" ></script><script>var Layzr = new Layzr ({attr: ' Data-layzr ', retinaAttr: ' Data-layzr-retina ', threshold:0, callback:null});</script>
Update
So how do you get the server side to convert an img in a heap of HTML into DATA-SRC? In fact, it is very simple, a few lines of the regular can be, such as in node. JS can be this way to convert the IMG src to DATA-SRC (can directly press F12 in the browser console run)
var html = ' html ' containing HTML = Html.replace (/]+>/g, function (IMGSTR, idx) { imgstr = imgstr.replace (' src= ', ' data-src= ') return imgstr})
Image Lazy Load: Open source Plug-ins (jQuery) that load images lazily