图片的赖加载(lazyLoad)

时间 2019-12-09

标签图片加载 lazyload 繁體版

原文原文链接

懒加载的意义（在线demo预览）

尽管不少公司的网页都有一些限制，好比页面的最大的图片大小不得大于50k,也有不少图片优化工具fis三、gulp等等，可是若是图片太多仍是会影响页面的加载速度，快则几十秒慢则几十分钟，这样会致使用户流失。css

图片的加载对页面的加载速度有很大影响！！因此，对于图片过多的页面，为了加速页面加载速度，因此不少时候咱们须要将页面内未出如今可视区域内的图片先不作加载，等到滚动到可视区域后再去加载。这样子对于页面加载性能上会有很大的提高，也提升了用户体验，即图片赖加载~html

原理

将页面中的img标签src指向一张小图片或者src为空，而后定义data-src（这个属性能够自定义命名，我才用data-src）属性指向真实的图片。git

当载入页面时，先把可视区域内的img标签的data-src属性值负给src，而后监听滚动事件，把用户即将看到的图片加载。这样便实现了懒加载。github

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片赖加载</title>
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
    <!-- 启用webAPP全屏模式-->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <!-- 隐藏状态栏或者设置状态栏的颜色-->
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <!-- 忽略数字自动识别为电话号码-->
    <meta name="format-detection" content="telephone=no">
    <!--控制缓存的失效日期 -->
    <meta http-equiv="Expires" content="-1">
    <!-- 禁止转码-->
    <meta http-equiv="Cache-Control" content="no-cache">
    <!-- 禁止缓存访问页面-->
    <meta http-equiv="Pragma" content="no-cache">
    <meta name="applicable-device" content="mobile">
    <!-- 页面关键词-->
    <meta content="" name="keywords">
    <meta name="description" content="">
    <link rel="stylesheet" href="css/img_lazy.css">
</head>
<body>
    <div class="main">
        <img src="" data-src="images/1.jpg" alt="">
        <img src="" data-src="images/2.jpg" alt="">
        <img src="" data-src="images/3.jpg" alt="">
        <img src="" data-src="images/4.jpg" alt="">
        <img src="" data-src="images/5.jpg" alt="">
        <img src="" data-src="images/6.jpg" alt="">
        <img src="" data-src="images/7.jpg" alt="">
        <img src="" data-src="images/8.jpg" alt="">
    </div>
<!--图片赖加载的JS-->
    <script src="js/imgLazyLoad.js"></script>
</body>
</html>

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none;
    border: 0;
    outline: 0;
}
.main{
    max-width: 640px;
    width: 100%;
    margin: 0 auto;
}
img{
    display: block;
    width: 100%;
    height: 640px;
}

/**
 * Created by Administrator on 2016/11/28.
 */
!function(){
    var imgs = document.getElementsByTagName("img");
    var num = imgs.length;
    var n = 0; //存储图片加载到的位置，避免每次都从第一张图片开始遍历
    lazyload(); //页面载入完毕加载但是区域内的图片
    window.onscroll = lazyload;
    function lazyload() { //监听页面滚动事件
        var seeHeight = document.documentElement.clientHeight; //可见区域高度
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //滚动条距离顶部高度
        for (var i = n; i < num; i++) {
            if (imgs[i].offsetTop < seeHeight + scrollTop) {
                if (imgs[i].getAttribute("src") == "") {
                    imgs[i].src = imgs[i].getAttribute("data-src");
                }
                n = i + 1;
            }
        }
    }
}();