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 id="container">
    <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属性中包含可选的低分辨率占位符

官网https://appelsiini.net/projects/lazyload/

 

posted on 2018-01-31 21:21  bbqwwb  阅读(142)  评论(0)  编辑  收藏  举报

导航