jQuery Lazy Load 图片延迟加载
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>延迟加载图片</title>
<style type="text/css">
*{padding:0;margin:0;}
img{ display: block; width:1000px; height:500px;} /*设置img大小是为了避免图片未加载出来时没高度，导致后面的图片往上出现在可视区域，提前加载*/
</style>
</head>
<body>
<div >
<img class="lazyload" data-src="https://appelsiini.net//img/bmw_m1_hood.jpg" alt="BMW M1 Hood">
<br><img class="lazyload" data-src="https://appelsiini.net//img/bmw_m1_side.jpg" alt="BMW M1 Side">
<br><img class="lazyload" src="https://appelsiini.net//img/placeholder/viper.jpg" data-src="https://appelsiini.net//img/viper.jpg" alt="Viper 1">
<br><img class="lazyload" src="https://appelsiini.net//img/placeholder/viper_corner.jpg" data-src="https://appelsiini.net//img/viper_corner.jpg" alt="Viper Corner">
<br><img class="lazyload" src="https://appelsiini.net//img/placeholder/bmw_m3_gt.jpg" data-src="https://appelsiini.net//img/bmw_m3_gt.jpg" alt="BMW M3 GT">
<br><img class="lazyload" src="https://appelsiini.net//img/placeholder/corvette_pitstop.jpg" data-src="https://appelsiini.net//img/corvette_pitstop.jpg" alt="Corvette Pitstop">
<br>
</div>
<script src="https://cdn.jsdelivr.net/npm/lazyload@2.0.0-beta.2/lazyload.js"></script>
<script>
window.addEventListener("load", function(event) {
lazyload();
});
</script>
</body>
</html>
Lazy Load假定可以在data-src属性中找到原始高分辨率图像的URL 。您还可以在src属性中包含可选的低分辨率占位符