封装的图片预加载，数据加载到浏览器底部加载数据

Posted 归尘2016

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了封装的图片预加载，数据加载到浏览器底部加载数据相关的知识，希望对你有一定的参考价值。

html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="jquery-1.8.3.min.js" type="text/javascript"></script>
        <style>
            *{
                padding:0;
                margin:0;
            }
            ul li{
                position: relative;
                padding:10px;
                border-bottom:1px solid  #f2f5f7;
                height:50px;
            }
            ul li img{
                width:50px;
                height:50px;
                position: absolute;
                left:10px;
                top:10px;
            }
            ul li div{
                margin-left:60px;
            }
            ul li div h2, ul li div p{
                font-size: 12px;
            }
            /*容器尺寸最好设置成图片尺寸，避免layout*/
            li{height:300px;}
        </style>
    </head>
    <body>
        <ul>
            <li>
                <img src="Thumbnail.png" data-src="image_1.png">
                <div>
                   <h2>标题</h2>
                   <p>详细内容详细内容</p>
                </div>
            </li>
            <li>
                <img src="Thumbnail.png" data-src="image_1.png">
                <div>
                   <h2>标题</h2>
                   <p>详细内容详细内容</p>
                </div>
            </li>
            <li>
                <img src="Thumbnail.png" data-src="image_1.png">
                <div>
                   <h2>标题</h2>
                   <p>详细内容详细内容</p>
                </div>
            </li>
            <li>
                <img src="Thumbnail.png" data-src="image_1.png">
                <div>
                   <h2>标题</h2>
                   <p>详细内容详细内容</p>
                </div>
            </li>
            <li>
                <img src="Thumbnail.png" data-src="image_1.png">
                <div>
                   <h2>标题</h2>
                   <p>详细内容详细内容</p>
                </div>
            </li>
            <li>
                <img src="Thumbnail.png" data-src="image_1.png">
                <div>
                   <h2>标题</h2>
                   <p>详细内容详细内容</p>
                </div>
            </li>
            <li>
                <img src="Thumbnail.png" data-src="image_1.png">
                <div>
                   <h2>标题</h2>
                   <p>详细内容详细内容</p>
                </div>
            </li>
            <li>
                <img src="Thumbnail.png" data-src="image_1.png">
                <div>
                   <h2>标题</h2>
                   <p>详细内容详细内容</p>
                </div>
            </li>
            <li>
                <img src="Thumbnail.png" data-src="image_1.png">
                <div>
                   <h2>标题</h2>
                   <p>详细内容详细内容</p>
                </div>
            </li>
            <li>
                <img src="Thumbnail.png" data-src="image_1.png">
                <div>
                   <h2>标题</h2>
                   <p>详细内容详细内容</p>
                </div>
            </li>
            <li>
                <img src="Thumbnail.png" data-src="image_1.png">
                <div>
                   <h2>标题</h2>
                   <p>详细内容详细内容</p>
                </div>
            </li>
            <li>
                <img src="Thumbnail.png" data-src="image_1.png">
                <div>
                   <h2>标题</h2>
                   <p>详细内容详细内容</p>
                </div>
            </li>
            <li>
                <img src="Thumbnail.png" data-src="image_1.png">
                <div>
                   <h2>标题</h2>
                   <p>详细内容详细内容</p>
                </div>
            </li>
            <li>
                <img src="Thumbnail.png" data-src="image_1.png">
                <div>
                   <h2>标题</h2>
                   <p>详细内容详细内容</p>
                </div>
            </li>
            <li>
                <img src="Thumbnail.png" data-src="image_1.png">
                <div>
                   <h2>标题</h2>
                   <p>详细内容详细内容</p>
                </div>
            </li>

        </ul>
        <script src="imgPreload.js" type="text/javascript"></script>
        <script>
             window.onload = function() {//页面加载后首屏自动加载一次
                loadingimg();
            };
            function loadingimg(){
                var images = document.getElementsByTagName("img");
                _laimgload.loadImg(images);  //图片预加载
                    window.onscroll = function(){
                        _laimgload.loadImg(images);   //滚动条滑动图片预加载
                    };
            };
            /*** 屏幕滚动后加载列表*/
            console.log($("#container").height());
            $(window).scroll(function() {
                var scrollTop =$(window).scrollTop();
                var scrollHeight = $(document).height();
                var windowHeight = $(window).height();
                if (scrollTop + windowHeight >= scrollHeight) {
                    if (_obj.asynFlag == true && _obj.loadFlag == true) {
                          loadingimg();
                    }
                }
            });
     </script>
    </body>
</html>

图片预加载的封装imgPreload.js

//图片预加载JS
function Laimgload(){}  
Laimgload.prototype.winHeight = function(){  //计算页面高度
    var winHeight = 0;
    //获取窗口高度 
    if (window.innerHeight){
        winHeight = window.innerHeight; 
    }else if ((document.body) && (document.body.clientHeight)) {
        winHeight = document.body.clientHeight; 
    }
    return winHeight;
}
Laimgload.prototype.loadImg = function(arr,lazy){        //图片预加载执行
    lazy = lazy||50;//提前加载的距离
    for( var i = 0,len = arr.length; i < len; i++){
        if(arr[i].getBoundingClientRect().top-this.winHeight() < document.documentElement.clientHeight && !arr[i].isLoad){
             arr[i].isLoad = true;
             arr[i].style.cssText = "transition: ‘‘; opacity: 0;";
             if(arr[i].dataset){
                 this.aftLoadImg(arr[i],arr[i].dataset.src);    
             }else{
                 this.aftLoadImg(arr[i],arr[i].getAttribute("data-src"));
             }
             (function(i){
                 setTimeout(function(){
                   arr[i].style.cssText = "transition: 1s; opacity: 1;"
                 },16)
              })(i);
            }
    }
}
Laimgload.prototype.aftLoadImg = function(obj,url){  //图片地址切换
    var oImg = new Image();
    oImg.src = url;
    if(oImg.complete){
        obj.src = oImg.src;
    }else{
        oImg.onload = function() {
           obj.src = oImg.src;
        };
    }
}
_laimgload = new Laimgload();
/* 图片预加载JS   
 * 把图片<img src="这里放加载中的小图" data-original="这里放图片的路径"/> 然后获取图片集合传入下面调用函数中  获取图片集合jQuery方法  $("#content_id").find("img"); 
 * 调用方法：  _laimgload.loadImg("这里传图片集合");
 * */

以上是关于封装的图片预加载，数据加载到浏览器底部加载数据的主要内容，如果未能解决你的问题，请参考以下文章

图片懒加载和预加载

封装了个图片预加载 · KYLE‘S BLOG

图片预加载

关于图片预加载1

Javascript图片预加载详解

前端优化 之 图片预加载和懒加载