Vue learned when studying pictures have lazy loading this statement, made after his own recording practice. At least now we did not meet this demand.
This picture can choose lazy loading in a lot of time. Electricity supplier site should have demand.
These plug-ins can also be found in the jquery plug-in library.
1. Echo.js implement lazy loading
Echo.js does not depend on jQuery or other JavaScript libraries, it can be used independently. And Echo.js very small, compressed less than 1KB.
Echo.js using HTML5 date property, and the need to get the value of the property, it is not compatible IE6, IE7. Although Lazy Load also use the date attribute of HTML5, but it gets the value of the method is not the same.
Use as follows:
1. The introduction of the JS file
<script src="js/echo.min.js"></script>
2.html in
<img class="lazy" src="images/blank.gif" data-echo="images/big-1.jpg">
blank.gif picture is a 1 x 1, and used as the default image, property values data-echo is the real address of the picture. Also best to set the width and height of the picture, or may be set in the CSS, or seems very bottom of the bottom of the picture will be very lazy loading.
3.JavaScript
Echo.init({ offset: 0, throttle: 0 });
offset: number-pixel image from the viewable area may be loaded
throttle: Load picture how many milliseconds delay
E.g:
<! DOCTYPE HTML > < HTML lang = "the CN-ZH" > < head > < Meta charset = "UTF-. 8" > < title > simple lazy loading JavaScript libraries image Echo.js </ title > < style > .demo IMG { width : 736px ; height : 490px ; background : URL (Images / loading.gif) 50% NO-REPEAT ; } </ style > </head> <body> <div class="demo" style="width: 736px; margin: 0 auto;"> <img class="lazy" src="images/blank.gif" data-echo="images/big-1.jpg"> <img class="lazy" src="images/blank.gif" data-echo="images/big-2.jpg"> <img class="lazy" src="images/blank.gif" data-echo="images/big-3.jpg"> <img class="lazy" src="images/blank.gif" data-echo="images/big-4.jpg"> <img class="lazy" src="images/blank.gif" data-echo="images/big-5.jpg"> <img class="lazy" src="images/blank.gif" data-echo="images/big-6.jpg"> <img class="lazy" src="images/blank.gif" data-echo="images/big-7.jpg"> </div> <script src="js/echo.min.js"></script> <script> Echo.init({ offset: 0, throttle: 0 }); </script> </body> </html>
If you want to achieve after 3s load, JS amended as follows:
Echo.init({ offset: 0, throttle: 3000 });
2.jquery.lazyload.js implement lazy loading
1. The introduction of the relevant js
<script src="jquery-1.11.0.min.js"></script> <script src="jquery.lazyload.js?v=1.9.1"></script>
2. Interface:
Add a picture image pattern lazy path reference method for data-original
<img class="lazy" data-original="img/bmw_m1_hood.jpg" width="765" height="574" alt="BMW M1 Hood">
3.js the beginning of lazyload and Picture Display
<script type="text/javascript" charset="utf-8"> $(function() { $("img.lazy").lazyload({ effect: "fadeIn" }); }); </script>
Its parameters are as follows:
$ ( "img.lazy" ) .lazyload ({ placeholder: "img / grey.gif", // with a picture placeholder in advance // placeholder, this picture is a picture to occupy the path to load the picture. position, to be loaded pictures, placeholder chart is hidden effect: "fadeIn", // load what effect using // effect (special effects), values are show (direct display), fadeIn (fade), slideDown (drop-down ), commonly used fadeIn threshold: 200, // before beginning to load // threshold, value is a number, represents the height of the page is set as 200, scrollbars when the height of the target position 200 from there began to load images, you can. do not let users perceive event: 'the click', // load when the trigger event // event, values are click (click), mouseover (mouse across), sporty (movement), foobar (...) can be achieved. none other than the mouse or click on the picture began to load, after the two values are not tested ... container: $ ( "# container"), // achieve the effect of a container picture //container, a container .lazyload default value take effect when you pull in the browser scroll bar, this parameter allows you to pull the scroll bar when a DIV which in turn loads the picture failurelimit: 10 // When the picture sort chaos // failurelimit, value digital .lazyload default will no longer continue to load when it finds the first area is not visible in the picture, but HTML container when confusion within the visible area of the picture may appear out of no load, failurelimit intended to be seen in the load N Zhang picture outside the region, in order to avoid this problem. });
E.g:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Lazy Load Enabled</title> </head> <body> <img class="lazy" data-original="img/bmw_m1_hood.jpg" width="765" height="574" alt="BMW M1 Hood"> <img class="lazy" data-original="img/bmw_m1_side.jpg" width="765" height="574" alt="BMW M1 Side"> <img class="lazy" data-original="img/viper_1.jpg" width="765" height="574" alt="Viper 1"> <img class="lazy" data-original="img/viper_corner.jpg" width="765" height="574" alt="Viper Corner"> <img class="lazy" data-original="img/bmw_m3_gt.jpg" width="765" height="574" alt="BMW M3 GT"> <img class="lazy" data-original="img/corvette_pitstop.jpg" width="765" height="574" alt="Corvette Pitstop"> <script src="jquery-1.11.0.min.js"></script> <script src="jquery.lazyload.js?v=1.9.1"></script> <script type="text/javascript" charset="utf-8"> $(function() { $("img.lazy").lazyload({ effect: "fadeIn" }); }); </script> </body> </html>
According to the developer tool bar you can also see the network time making the request.