【图片预加载】ImgLoaded★★★★★★★★★★★★

*************************************************************

第一种方法：（可以计算加载图片的数量）

css样式：
/*图片预加载*/
.ImgLoading{ position:absolute; width:100%; height:100%; top:0; background:#000; z-index:100; opacity:0.95}
.iconImg{ position:absolute; width:40%; left:30%; top:30%;}
.ImgPercent{position:absolute; width:100%; top:60%; height:5%; text-align:center; font-size:1.8em; line-height:2em;}
.wrap{ display:none;}

 

html代码：
<div class="ImgLoading"> <!--loading动画-->
           <div class="iconImg"><img src="images/icon.png"></div>
          <div class="ImgPercent" id="percent">0%</div>
   </div>

<img v="images/searchchina/01/2.png">
<img v="images/searchchina/01/2.png">
<img v="images/searchchina/01/2.png">

js函数：

function ImgLoaded(){
            var loadingPercent = $("#percent");
            var img = $("body").find("img[v]");//图片数组    //loadsrc指图片预先加载的属性。
                var length = img.length;//图片数量
                var downImg = 0;//已下载数量
                var percent = 0;//百分比
                    
                for ( var i=0;i<length;i++ )
                {
                    var imgs = new Image();
                    var imgDiv = img.eq(i);
                    var imgsrc = imgDiv.attr("v");
                    imgs.src = imgsrc;
                    if(imgs.complete)
                    {
                        imgDiv.attr("src",imgsrc).removeAttr("v");//有缓存
                        imgDown();
                    }
                    else
                    {
                        imgDiv.attr("src",imgsrc).load(function(){
                            $(this).removeAttr("v");//无缓存
                            imgDown();
                        })
                    }
                }
                function imgDown()
                {
                    downImg ++;
                    percent = parseInt(100*downImg/length);
                    loadingPercent.html(percent+"%"); //计算加载图片的百分比
                  //  console.log(percent);
                    if ( percent == 100 )
                    {
                           /*图片加载成功后执行代码段*/
                        $(".ImgLoading").animate({top:"-100%"},500,function(){
                            $(".wrap").fadeIn(20);    
                            $(this).remove();
                        });

                    }
                }
        }

ImgLoaded();

 *************************************************************

 方法二：

 

<img v="images/searchchina/01/2.png">
<img v="images/searchchina/01/2.png">
<img v="images/searchchina/01/2.png">

 

function LoadImg(ele){/*图片预加载*/
       ele.find("img").each(function(){ 
                $(this).attr("src",$(this).attr("v"));
                $(this).removeAttr("v");
        });
 }

setTimeout(function(){Connment.LoadImg($(".swiper-container"))},500); /*执行图片预加载*/

*************************************************************

 方法三：(简单实用***************************)

$("#SwipeTarget").find("img").each(function(){
      $(this).attr("src",$(this).attr("v"));
      $(this).removeAttr("v");
 });

 

给心灵一个纯净空间，让思想，情感，飞扬！