principle:
img src tag of the first link set to the same image (such as a blank picture), and then to set custom img tag attributes (such as data-src), and then address the real picture is stored in the data-src, when listening to JS when the picture element into the visible window, the custom attributes to the address stored in the src attribute. Achieve the effect of lazy loaded.
This will protect a large number of pages into one transmission request to the server, causing the server response surface, page Caton crashes.
achieve:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <script src="https://cdn.bootcss.com/jquery/2.1.0/jquery.min.js"></script> 9 <style> 10 .container{ 11 max-width: 800px; 12 margin:0 auto; 13 } 14 .container:after{ 15 content:""; 16 display: block; 17 clear:both; 18 } 19 .container img{ 20 width:50%; 21 height:260px; 22 float:left; 23 } 24 </style> 25 </head> 26 <body> 27 <div class="container"> 28 <img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690" alt="1" data-src="http://img4.imgtn.bdimg.com/it/u=951914923,777131061&fm=26&gp=0.jpg"> 29 <img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690" alt="1" data-src="http://img1.imgtn.bdimg.com/it/u=637435809,3242058940&fm=26&gp=0.jpg"> 30 <img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690" alt="1" data-src="http://img1.imgtn.bdimg.com/it/u=3990342075,2367006974&fm=200&gp=0.jpg"> 31 <img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690" alt="1" data-src="http://img1.imgtn.bdimg.com/it/u=1813891576,1754763093&fm=26&gp=0.jpg"> 32 <img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690" alt="1" data-src="http://img4.imgtn.bdimg.com/it/u=2539922263,2810970709&fm=200&gp=0.jpg"> 33 <img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690" alt="1" data-src="http://img4.imgtn.bdimg.com/it/u=1878067600,3935137756&fm=200&gp=0.jpg"> 34 <img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690" alt="1" data-src="http://img3.imgtn.bdimg.com/it/u=85690711,3884201894&fm=26&gp=0.jpg"> 35 <img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690" alt="1" data-src="http://img2.imgtn.bdimg.com/it/u=3844233833,3942617167&fm=200&gp=0.jpg"> 36 <img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690" alt="1" data-src="http://img0.imgtn.bdimg.com/it/u=1846695025,2515725663&fm=26&gp=0.jpg"> 37 <img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690" alt="1" data-src="http://img3.imgtn.bdimg.com/it/u=346230831,1833217134&fm=200&gp=0.jpg"> 38 <img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690" alt="1" data-src="http://img5.imgtn.bdimg.com/it/u=3478148120,2683867435&fm=26&gp=0.jpg"> 39 <img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690" alt="1" data-src="http://img5.imgtn.bdimg.com/it/u=2298824648,1812234339&fm=200&gp=0.jpg"> 40 <img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690" alt="1" data-src="http://img2.imgtn.bdimg.com/it/u=4201594846,4178139206&fm=26&gp=0.jpg"> 41 <img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690" alt="1" data-src="http://img2.imgtn.bdimg.com/it/u=484389598,819397330&fm=200&gp=0.jpg"> 42 <img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690" alt="1" data-src="http://img1.imgtn.bdimg.com/it/u=3729466012,914166979&fm=26&gp=0.jpg"> 43 <img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690" alt="1" data-src="http://img2.imgtn.bdimg.com/it/u=354463615,3836278171&fm=200&gp=0.jpg"> 44 <img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690" alt="1" data-src="http://img5.imgtn.bdimg.com/it/u=1831250492,3489827059&fm=200&gp=0.jpg"> 45 <img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690" alt="1" data-src="http://img1.imgtn.bdimg.com/it/u=779005622,2247570143&fm=200&gp=0.jpg"> 46 <img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690" alt="1" data-src= "http://img1.imgtn.bdimg.com/it/u=1968229118,3512711019&fm=26&gp=0.jpg" > 47 < IMG the src = "http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690" Alt = ". 1" Data-the src = "http://img2.imgtn.bdimg.com/it/u=1088428253,1150170159&fm=200&gp=0.jpg" > 48 </ div > 49 50 < Script > 51 is 52 is // did not start rolling when the pictures appear in the window will load 53 start (); 54 55 // when the page began to roll when traversing the pictures, if the picture appears in the window, loads the picture 56 var Clock;// function throttle 57 $(window).on('scroll',function(){ 58 if(clock){ 59 clearTimeout(clock); 60 } 61 clock = setTimeout(function(){ 62 start() 63 },200) 64 }) 65 66 function start(){ 67 $('.container img').not('[data-isLoading]') .each ( function () { 68 IF (isShow ($ ( the this ))) { 69 loadImg ($ ( the this )); 70 } 71 is }) 72 } 73 is 74 75 // determines whether the image appears in the window function 76 function isShow ($ Node) { 77 return $ node.offset () Top. <= $ (window) .height () + $ (window) .scrollTop (); 78 } 79 80 // function to load the picture, is to since the real picture address data-src attribute definitions stored, assigned to the src 81 function loadImg ($ IMG) { 82 $ img.attr ( ' the src ' , $ img.attr ( ' Data-the src ' )); 83 84 // loaded images I it sets a property value of 1, as the logo 85 // get the original intention of this is because, every time when scrolling, all the pictures will be traversed again, this was a waste, so to be a logo, which has not rolling when loading images only traverse 86 $ img.attr ( ' Data-isLoading ' , . 1 ); 87 } 88 89 </ Script > 90 </ body > 91 is </ HTML >
Author: a cup of Ganmaoling
link: https: //www.jianshu.com/p/8e2a73638153
Source: Jane books