JS圖片懶加載技術實現過程解析
懶加載技術
懶加載（LazyLoad）是前端優化的一種有效方式，極大的提升用戶體驗，圖片一直是頁面加載的流浪大戶，現在一張圖片幾兆已經是很正常的事，遠遠大于代碼的大小。
原理：頁面加載后只讓文檔可視區內的圖片顯示，其它不顯示，隨著用戶對頁面的滾動，判斷其區域位置，生成img標簽，讓到可視區的圖片加載出來。
所用相關技術：給img加屬性 (例如data-src），將圖片的地址賦值給他，這樣就生成img標簽后再把data-src的值賦給img的src（通過dataset.src或者getAttribute(’src’),再賦值給img.setAttribute(’src’)）。
jqueryLazyload方式
<!DOCTYPE html><html> <head> <meta charset='UTF-8'> <title></title> <style type='text/css'> *{margin:0px;padding: 0; } .wrap{overflow: hidden;width:915px;background:#2d2d2d;margin:50px auto;border-radius:10px;/*font-size:0px;*/ } .wrap img{float:left; display: block;width:280px;height:180px;margin:10px 10px;border:2px solid #7c7c7c;border-radius:10px; } </style> </head> <body><div class='wrap'> <img src='http://www.aoyou183.cn/bcjs/js/images2/1.jpg' /> <img src='http://www.aoyou183.cn/bcjs/js/images2/2.jpg' /> <img src='http://www.aoyou183.cn/bcjs/js/images2/3.jpg' /> <img src='http://www.aoyou183.cn/bcjs/js/images2/4.jpg' /> <img src='http://www.aoyou183.cn/bcjs/js/images2/5.jpg' /> <img src='http://www.aoyou183.cn/bcjs/js/images2/6.jpg' /> <img src='http://www.aoyou183.cn/bcjs/js/images2/7.jpg' /> <img src='http://www.aoyou183.cn/bcjs/js/images2/1.jpg' /> <img src='http://www.aoyou183.cn/bcjs/js/images2/2.jpg' /> <img src='http://www.aoyou183.cn/bcjs/js/images2/3.jpg' /> <img src='http://www.aoyou183.cn/bcjs/js/images2/4.jpg' /> <img src='http://www.aoyou183.cn/bcjs/js/images2/5.jpg' /> <img src='http://www.aoyou183.cn/bcjs/js/images2/6.jpg' /> <img src='http://www.aoyou183.cn/bcjs/js/images2/7.jpg' /> <img src='http://www.aoyou183.cn/bcjs/js/images2/1.jpg' /> <img src='http://www.aoyou183.cn/bcjs/js/images2/2.jpg' /> <img src='http://www.aoyou183.cn/bcjs/js/images2/3.jpg' /> <img src='http://www.aoyou183.cn/bcjs/js/images2/4.jpg' /> <img src='http://www.aoyou183.cn/bcjs/js/images2/5.jpg' /> <img src='http://www.aoyou183.cn/bcjs/js/images2/6.jpg' /> <img src='http://www.aoyou183.cn/bcjs/js/images2/7.jpg' /> <img src='http://www.aoyou183.cn/bcjs/js/images2/1.jpg' /> <img src='http://www.aoyou183.cn/bcjs/js/images2/2.jpg' /> <img src='http://www.aoyou183.cn/bcjs/js/images2/3.jpg' /> <img src='http://www.aoyou183.cn/bcjs/js/images2/4.jpg' /> <img src='http://www.aoyou183.cn/bcjs/js/images2/5.jpg' /> <img src='http://www.aoyou183.cn/bcjs/js/images2/6.jpg' /> <img src='http://www.aoyou183.cn/bcjs/js/images2/7.jpg' /> <img src='http://www.aoyou183.cn/bcjs/js/images2/1.jpg' /> <img src='http://www.aoyou183.cn/bcjs/js/images2/2.jpg' /> <script src='http://www.aoyou183.cn/bcjs/js/jquery-1.11.1.min.js'></script> <script src='http://www.aoyou183.cn/bcjs/js/lazyload.js'></script> <script> $('img').lazyload({placeholder :'images2/loading.gif', //用圖片提前占位// placeholder,值為某一圖片路徑.此圖片用來占據將要加載的圖片的位置,待圖片加載時,占位圖則會隱藏 effect: 'fadeIn', // 載入使用何種效果// effect(特效),值有show(直接顯示),fadeIn(淡入),slideDown(下拉)等,常用fadeIn threshold: 200, // 提前開始加載// threshold,值為數字,代表頁面高度.如設置為200,表示滾動條在離目標位置還有200的高度時就開始加載圖片,可以做到不讓用戶察覺 // event: ’click’, // 事件觸發時才加載// event,值有click(點擊),mouseover(鼠標劃過),sporty(運動的),foobar(…).可以實現鼠標莫過或點擊圖片才開始加載,后兩個值未測試… //container: $('#container'), // 對某容器中的圖片實現效果// container,值為某容器.lazyload默認在拉動瀏覽器滾動條時生效,這個參數可以讓你在拉動某DIV的滾動條時依次加載其中的圖片 //failurelimit : 10 // 圖片排序混亂時 // failurelimit,值為數字.lazyload默認在找到第一張不在可見區域里的圖片時則不再繼續加載,但當HTML容器混亂的時候可能出現可見區域內圖片并沒加載出來的情況,failurelimit意在加載N張可見區域外的圖片,以避免出現這個問題. }); </script> </div> </body></html>
echo.js方式
echo.js是一款非常簡單實用輕量級的圖片延時加載插件，如果你的項目中沒有依賴jquery，那么這將是個不錯的選擇，50行代碼，壓縮后才1k。當然你完全可以集成到自己項目中去。
下載地址：https://github.com/helijun/helijun/tree/master/plugin/echo
<style>.demo img { width: 736px; height: 490px; background: url(images/loading.gif) 50% no-repeat;}</style>
<div class='demo'> <img src='http://www.aoyou183.cn/bcjs/images/blank.gif' data-echo='images/big-1.jpg'></div>
<script src='http://www.aoyou183.cn/bcjs/js/echo.min.js'></script><script>Echo.init({ offset: 0,//離可視區域多少像素的圖片可以被加載 throttle: 0 //圖片延時多少毫秒加載}); </script>
說明：blank.gif是一張背景圖片，包含在插件里了。圖片的寬高必須設定，當然，可以使用外部樣式對多張圖片統一控制大小。data-echo指向的是真正的圖片地址。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網。
相關文章：
網公網安備