Home > Developer > Web Develop
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.
UnveilThis 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");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 ();});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>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>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
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
