使用jquery實現的按需載入
阿新 • • 發佈：2019-01-29
圖片的延遲載入最常見的是隻載入網頁顯示在螢幕中的圖片，如果使用者沒有滾動到網頁靠下的部分，那圖片就不用顯示了，節省HTTP請求和頻寬，同時提高首屏的載入速度，提高使用者體驗。不會的童鞋拿去研究研究
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>按需載入</title> <style type="text/css"> *{list-style:none;} li{width:300px;height:250px;border:solid 1px #333;padding:10px;margin-bottom:10px;} </style> </head> <body> <ul> <li><img srcImg="./sunli/1.jpg" src="" alt="" width="100%"></li> <li><img srcImg="./sunli/2.jpg" alt="" width="100%"></li> <li><img srcImg="./sunli/3.jpg" alt="" width="100%"></li> <li><img srcImg="./sunli/4.jpg" alt="" width="100%"></li> <li><img srcImg="./sunli/5.jpg" alt="" width="100%"></li> <li><img srcImg="./sunli/6.jpg" alt="" width="100%"></li> </ul> <script type="text/javascript" src="jquery-1.8.3.min.js"></script> <script type="text/javascript"> $(window).scroll(function(){ $('li[isLoaded!=1]').each(function(){ //如果存在當前isloaded屬性 直接返回 // if($(this).attr('isLoaded')) return; //頁面的y軸滾動距離 var sT = $(window).scrollTop(); //頁面可視區域的高度 var CH = $(window).height(); //獲取當前元素距離文件頂部的偏移量 var OT = $(this).offset().top; //如果圖片即將要展現在螢幕上的話 if(OT < sT + CH){ //獲取當前li中img的src屬性值 var src = $(this).find('img').attr('srcImg'); //設定src屬性 $(this).find('img').attr('src',src); //載入完畢之後新增屬性 做標識 $(this).attr('isLoaded',1); } }) }) </script> </body> </html>