商城图片懒加载
<!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>
技术改变一切
