Image Lazy Load: Open source Plug-ins (jQuery) that load images lazily

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.