基於Jquery的（可視區域，向上滾動向下滾動兩種）圖片懶載入
阿新 • • 發佈：2018-11-09
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { padding: 0px; margin: 0px; } html, body { width: 100%; min-height: 100%; } img { border: none; vertical-align: middle; height: 400px; width: 400px; } @keyframes fadeIn { 0% { opacity: 0.5; } 100% { opacity: 1; } } </style> </head> <body> <img src="" data-src="111.jpg" alt=""><br/> <img src="" data-src="111.jpg" alt=""><br/> <img src="" data-src="111.jpg" alt=""><br/> <img src="" data-src="111.jpg" alt=""><br/> <img src="" data-src="111.jpg" alt=""><br/> <img src="" data-src="111.jpg" alt=""><br/> <img src="" data-src="111.jpg" alt=""><br/> <img src="" data-src="111.jpg" alt=""><br/> <img src="" data-src="111.jpg" alt=""><br/> <img src="" data-src="111.jpg" alt=""><br/> <img src="" data-src="111.jpg" alt=""><br/> <img src="" data-src="111.jpg" alt=""><br/> <img src="" data-src="111.jpg" alt=""><br/> <img src="" data-src="111.jpg" alt=""><br/> </body> </html> <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script> <script> $('img').each(function () {//在未觸發滾動事件時先判斷圖片是否已經出現在視窗中，開啟頁面時先遍歷一次 if (checkShow($(this)) && !isLoaded($(this))) { loadImg($(this));//載入當前img } }) $(window).on('scroll', function () {//滾動的觸發事件 $('img').each(function () {//遍歷img標籤 if (checkShow($(this)) && !isLoaded($(this))) { loadImg($(this));//載入當前img } }) }) function checkShow($img) { // 傳入img物件 var scrollTop = $(window).scrollTop(); //即頁面向上滾動的距離 var windowHeight = $(window).height(); // 瀏覽器自身的高度 var offsetTop = $img.offset().top; //目標標籤img相對於document頂部的位置 var imgHeight = $img.height(); // console.log(imgHeight); if (offsetTop < (scrollTop + windowHeight) && (offsetTop+imgHeight) > scrollTop) { //在2個臨界狀態之間的就為出現在視野中的 return true; } return false; } function isLoaded($img) { return $img.attr('data-imgurl') === $img.attr('src'); //如果data-imgurl和src相等那麼就是已經載入過了 } function loadImg($img) { $img.attr('src', $img.attr('data-imgurl')); // 把自定義屬性中存放的真實的src地址賦給src屬性 // $img.style.cssText = "transition: 1s; opacity: 1;" //相當於fadein $img.css("animation",'fadeIn 1s') } </script>