图片的赖加载(lazyLoad)

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

尽管很多公司的网页都有一些限制，比如页面的最大的图片大小不得大于50k,也有很多图片优化工具fis3、gulp等等，但是如果图片太多还是会影响页面的加载速度，快则几十秒慢则几十分钟，这样会导致用户流失。

图片的加载对页面的加载速度有很大影响！！所以，对于图片过多的页面，为了加速页面加载速度，所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载， 等到滚动到可视区域后再去加载。这样子对于页面加载性能上会有很大的提升，也提高了用户体验，即图片赖加载~

原理

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

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

<!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;
            }
        }
    }
}();

 

posted @ 2016-11-28 11:46  逗伴不是瓣  阅读(1687)  评论(0)  编辑  收藏  举报