图片预加载。。。。（2）图片延迟加载

HTML

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>图片预加载</title>
</head>
<body>
<div class="loading" id="js_loading">
    <div class="loadingImg">
        <img src="images/cake-1.jpg"/>
    </div>
    <div class="percent" id="js_speed">0%</div>
</div>
<div id="container">
    <img  data-src="images/cake-1.png" height="358" width="444"/>
    <img  data-src="images/cake-2.png" height="358" width="444"/>
    <img  data-src="images/cake-3.png" height="358" width="444"/>
    <img  data-src="images/cake-4.png" height="358" width="444"/>

</div>
<script src="js/jquery.min.js"></script>
<script src="js/loadImg.js"></script>

</body>
</html>

 

JS：

var $loading = $('#js_loading');
function execJs() {
  loadingAll();
//第一部分图片
  function loadingImgs(loadCallback){
    var $ele = $('#container').find('img'),
        len = $ele.length;
    loadImg($ele, 0,function(index){
        var $speed = $('#js_speed');
        $speed.html(Math.floor(((len - (len - index)) / len) * 100) + '%');
    },loadCallback);
  }

  //loading开始
  function loadingAll(){
    loadingImgs(function(){
        alert("加载完成！");
         $loading.fadeOut(500);
        // setTimeout(function(){
        //   $loading.fadeOut(500);
        // },1000);
        // $(".home-page .rose").animate({"opacity":'1'},500);

    });
  }

}

window.onload=function(){
    execJs();
}

 

loadImg.js库

function loadImg(imgObj, index, complete, loadCallback){
    var img = new Image(),
        len = imgObj.length,
        url = imgObj.eq(index).data('src');

    if (index != len) {
        if(url){
            img.src = url;
        }
    } else {
        if(loadCallback) {
            loadCallback();
        }
        return;
    }

    if (img.complete) {
        imgObj.eq(index).attr('src', url);
        index ++
        if (complete) {
            complete(index);
        }
        loadImg(imgObj, index, complete, loadCallback);

    } else {
        img.onload = function () {
            imgObj.eq(index).attr('src', url);
            index ++
            if (complete) {
                complete(index);
            }
            loadImg(imgObj, index, complete, loadCallback);
            img.onload = null;
        };
    };
}
posted @ 2017-02-10 15:33  Shimily  阅读(172)  评论(0)    收藏  举报