首頁 > 開發者 > JavaScript
標籤：asc 情況 通過 time view reset splay scroll style
源碼工程：https://github.com/blff122620/jsLibary/lazyLoad.html
實現原理就是通過scroll事件判斷元素是否已經進入viewport
匯入
lazyLoad.js
使用
inViewPort(item)即可 判斷item是否在視口裡，然後繼續進行自己的邏輯就行了
<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <title>圖片懶載入</title> <link rel="stylesheet" href="./static/css/reset.css"> <link rel="stylesheet" href="./static/css/global.css"> <style> .content { /*height: 1500px;*/ width: 100%; overflow: hidden; } .content>img { border-radius: 5px; display: inline-block; margin: 200px 0 0 200px; width: 235px; } </style></head><body> <div class="content bg1" id="js-imgdiv"> <img src="./static/img/lazyDefault.jpg" data-url="./static/img/1.jpg" alt="" > <img src="./static/img/lazyDefault.jpg" data-url="./static/img/2.jpg" alt="" > <img src="./static/img/lazyDefault.jpg" data-url="./static/img/3.jpg" alt="" > <img src="./static/img/lazyDefault.jpg" data-url="./static/img/4.jpg" alt="" > <img src="./static/img/lazyDefault.jpg" data-url="./static/img/5.jpg" alt="" > <img src="./static/img/lazyDefault.jpg" data-url="./static/img/6.jpg" alt="" > </div> <script type="text/javascript" src="./static/js/util.js"></script> <script type="text/javascript" src="./static/js/lazyLoad.js"></script> <script> (function() { window.onload=function(){ var pics = $$("#js-imgdiv>img"); setPicSrc(pics); window.onscroll = function(){ setPicSrc(pics); }; function setPicSrc(pics){ pics.forEach(function(item){ if(inViewPort(item)){ setTimeout(function(){ item.src = item.dataset.url; },200);//類比一下網速慢的情況 }; }); } }; }()); </script></body></html>
原生JavaScript實現懶載入
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
