首页 > 代码库 > 封装的图片预加载,数据加载到浏览器底部加载数据

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

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

//图片预加载JSfunction 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="http://www.mamicode.com/这里放加载中的小图" data-original="这里放图片的路径"/> 然后获取图片集合传入下面调用函数中  获取图片集合jQuery方法  $("#content_id").find("img");  * 调用方法:  _laimgload.loadImg("这里传图片集合"); * */

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