商城图片懒加载

<!DOCTYPE html> <html lang="en">
<head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <meta http-equiv="X-UA-Compatible" content="ie=edge">     <title>Document</title>     <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <style>         #container {             margin: 0 auto;         }
        img {             width: 200px;             height: 200px;         }     </style> </head>
<body>
    <div id="container">         <img src="../static/images/timg2.gif"             data-source="https://img13.360buyimg.com/jdcms/s150x150_jfs/t26032/242/1832374839/390726/15926ed0/5bbcde9aN14503eda.jpg.webp">         <img src="../static/images/timg2.gif"             data-source="https://img14.360buyimg.com/jdcms/s150x150_jfs/t1/21607/40/14094/135604/5ca568aeEce84a12b/28fe9fec988d21c4.jpg.webp">         <img src="../static/images/timg2.gif"             data-source="https://img11.360buyimg.com/jdcms/s150x150_jfs/t1/81299/1/10041/248198/5d788350E9862c858/1f3202994c2624e6.jpg.webp">         <img src="../static/images/timg2.gif"             data-source="https://img14.360buyimg.com/jdcms/s150x150_jfs/t1/67822/22/9911/141808/5d7804a3E1c1796ce/a4ff0dd48086f3e4.jpg.webp">         <img src="../static/images/timg2.gif"             data-source="https://img14.360buyimg.com/jdcms/s150x150_jfs/t23587/338/2698504422/409707/fbcdf37/5b8ac0dfNb3fb2ba8.jpg.webp">         <img src="../static/images/timg2.gif"             data-source="https://img13.360buyimg.com/jdcms/s150x150_jfs/t26032/242/1832374839/390726/15926ed0/5bbcde9aN14503eda.jpg.webp">         <img src="../static/images/timg2.gif"             data-source="https://img20.360buyimg.com/jdcms/s150x150_jfs/t1/66829/24/8543/123627/5d674012E628732d7/7380e5cd74551b96.jpg.webp">         <img src="../static/images/timg2.gif"             data-source="https://img14.360buyimg.com/jdcms/s150x150_jfs/t1/67822/22/9911/141808/5d7804a3E1c1796ce/a4ff0dd48086f3e4.jpg.webp">         <img src="../static/images/timg2.gif"             data-source="https://img10.360buyimg.com/jdcms/s150x150_jfs/t1/40708/7/12016/367035/5d56438fEcbc9dc1c/59363d8f3a2e756a.jpg.webp">         <img src="../static/images/timg2.gif"             data-source="https://img14.360buyimg.com/jdcms/s150x150_jfs/t1/21607/40/14094/135604/5ca568aeEce84a12b/28fe9fec988d21c4.jpg.webp">         <img src="../static/images/timg2.gif"             data-source="https://img30.360buyimg.com/jdcms/s150x150_jfs/t1/82560/13/765/142326/5cefa262Eddf2efba/542cee95bf4fbdd3.jpg.webp">         <img src="../static/images/timg2.gif"             data-source="https://img30.360buyimg.com/jdcms/s150x150_jfs/t1/82560/13/765/142326/5cefa262Eddf2efba/542cee95bf4fbdd3.jpg.webp">
        <h1>001</h1>         <h1>002</h1>         <h1>003</h1>         <h1>004</h1>         <h1>005</h1>         <h1>006</h1>         <h1>007</h1>         <h1>008</h1>         <h1>009</h1>         <h1>010</h1>         <h1>011</h1>         <h1>012</h1>         <h1>013</h1>         <h1>014</h1>         <h1>015</h1>         <h1>016</h1>         <h1>017</h1>         <h1>018</h1>         <h1>019</h1>         <h1>020</h1>         <h1>021</h1>         <h1>022</h1>         <h1>023</h1>         <h1>024</h1>         <h1>025</h1>         <h1>026</h1>         <h1>027</h1>         <h1>028</h1>         <h1>029</h1>         <h1>030</h1>         <h1>031</h1>         <h1>032</h1>         <h1>033</h1>         <h1>034</h1>         <h1>035</h1>         <h1>036</h1>         <h1>037</h1>         <h1>038</h1>         <h1>039</h1>         <h1>040</h1>         <h1>041</h1>         <h1>042</h1>         <h1>043</h1>         <h1>044</h1>         <h1>045</h1>         <h1>046</h1>         <h1>047</h1>         <h1>048</h1>         <h1>049</h1>         <h1>050</h1>         <h1>051</h1>         <h1>052</h1>         <h1>053</h1>
        <img src="../static/images/timg2.gif"             data-source="https://img10.360buyimg.com/jdcms/s150x150_jfs/t1/75569/39/510/326459/5cebac39E66f43e9a/2bad18cfc4c063a3.jpg.webp">         <img src="../static/images/timg2.gif"             data-source="https://img12.360buyimg.com/img/s150x150_jfs/t1/22900/38/12984/181797/5c9cf341Ed7fbc3ba/f780b7e702c7d49a.jpg!cc_150x150.webp">         <img src="../static/images/timg2.gif"             data-source="https://img10.360buyimg.com/jdcms/s150x150_jfs/t1/15378/6/4942/198651/5c3699bbEf0e9d721/a45c2788aa87f7a1.jpg.webp">         <img src="../static/images/timg2.gif"             data-source="https://img30.360buyimg.com/jdcms/s150x150_jfs/t3745/28/1037089690/241833/d02040d0/581c2fa6N4cf794f1.jpg.webp">         <img src="../static/images/timg2.gif"             data-source="https://img20.360buyimg.com/jdcms/s150x150_jfs/t5425/325/2314422413/78845/37dad976/591957c4N9180120b.jpg.webp">         <img src="../static/images/timg2.gif"             data-source="https://img30.360buyimg.com/jdcms/s150x150_jfs/t1/28000/28/11660/111268/5c906504E55f685cb/a5a8a37a2588d180.jpg.webp">         <img src="../static/images/timg2.gif"             data-source="https://img14.360buyimg.com/jdcms/s150x150_jfs/t2494/186/2368215952/153636/ae78077a/5704dbf1Nef1b17fa.jpg.webp">         <img src="../static/images/timg2.gif"             data-source="https://img11.360buyimg.com/jdcms/s150x150_jfs/t18628/122/2443631426/144757/76edb06e/5af5770fN6a16d548.jpg.webp">

        <h1>054</h1>         <h1>055</h1>         <h1>056</h1>         <h1>057</h1>         <h1>058</h1>         <h1>059</h1>         <h1>060</h1>         <h1>061</h1>         <h1>062</h1>         <h1>063</h1>         <h1>064</h1>         <h1>065</h1>         <h1>066</h1>         <h1>067</h1>         <h1>068</h1>         <h1>069</h1>         <h1>070</h1>         <h1>071</h1>         <h1>072</h1>         <h1>073</h1>         <h1>074</h1>         <h1>075</h1>         <h1>076</h1>         <h1>077</h1>         <h1>078</h1>         <h1>079</h1>         <h1>080</h1>         <h1>081</h1>         <h1>082</h1>         <h1>083</h1>         <h1>084</h1>         <h1>085</h1>         <h1>086</h1>         <h1>087</h1>         <h1>088</h1>         <h1>089</h1>         <h1>090</h1>         <h1>091</h1>         <h1>092</h1>         <h1>093</h1>         <h1>094</h1>         <h1>095</h1>         <h1>096</h1>         <h1>097</h1>         <h1>098</h1>         <h1>099</h1>         <h1>100</h1>
    </div>
    <script>
        $(window).scroll(handleScroll);
        function handleScroll() {             // 视口的高度             let wh = $(window).height();             // 滚动的高度             let document_scroll_height = $(window).scrollTop();             // 图片偏移视口可视的高度             let imgs = $("img[data-source]");
            for (let i = 0; i < imgs.length; i++) {                 let tp = $(imgs[i]).offset().top;                 if (tp < (wh + document_scroll_height) && tp > document_scroll_height) {                     setTimeout(function () {                         $(imgs).eq(i).attr("src", $(imgs).eq(i).attr("data-source"));                     }, 500);                 } else {                     $(imgs).eq(i).attr("src", "../static/images/timg2.gif");                 }
            }

        }
        handleScroll();
    </script>
</body>
</html>
上一篇:微信内置浏览器图片查看器的使用


下一篇:原生js实现懒加载并节流