封装图片预加载

技术 demo

JavaScript

2017-06-23 19:06:45

251

作者:黑夜男神

html 代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>节点控制区域预加载页面所有图片</title>
    <script type="text/javascript" src="http://www.xipwang.cn/js/jquery.min.js"></script>     
    <script type="text/javascript" src="js/LoadImages.js"></script>
</head>
<style type="text/css">
*{ margin: 0; padding: 0 }
ul { list-style-type: none;  }    
.loadAllImage{ text-align: center; }
</style>
<body>
<div class="loadAllImage">
    <ul>
        <li><img src="http://www.xipwang.cn/wp-content/uploads/2016/08/bc17e3bc-de7c-670f-6064-1478771eacc0.jpg"></li>
        <li><img src="http://www.xipwang.cn/wp-content/uploads/2016/08/1.jpeg"></li>
        <li><img src="http://www.xipwang.cn/wp-content/uploads/2016/07/cropped-20141127153046_swLy3.jpeg"></li>
        <li><img src="http://www.xipwang.cn/wp-content/uploads/2016/08/8.jpg"></li>
        <li><img src="http://www.xipwang.cn/wp-content/uploads/2016/07/138-140911113018-50.jpg"></li>
        <li><img src="http://www.xipwang.cn/wp-content/uploads/2016/08/surf.jpg"></li>
    </ul>
</div>
</body>
<script type="text/javascript">
 ;(function($,wd,doc,undefined){
    $.fn.Loadimage = function (configuration){    
        var thisAllimg=this;                
        var parameter =$.extend({
            sectcut:true,
            load:"images/loading.gif",
            width:100+"%",
            height:100+"%",                

        }||{},configuration);        
    function thisImgArr(allimage){ 
        var  arrSrc=[];//提取所有的url路径
        var  arrImg=[];
        $.each(allimage,function(i,objimg){    
                arrImg[i] = new Image();
                arrSrc.push($(objimg).attr("src"))                        
                if(objimg.complete){ //加载完成后直接缓存读取
                    Sectcuting();    
                    return;
                };
                arrImg[i].src =arrSrc[i]    
                $(objimg).attr("src","");
                var loading=$("<img  title=\"图片加载中...\" src=\""+parameter.load+"\" />")
                $(objimg).hide();
                $(objimg).after(loading);                        
                $(arrImg[i]).load(function(){
                        loading.remove();
                        Sectcuting();                                
                        $(objimg).attr("src",arrSrc[i]);
                        $(objimg).show();

                });
                function  Sectcuting (){
                    if(parameter.sectcut) { 
                            $(objimg).width(parameter.width);
                            $(objimg).height(parameter.height);
                        };
                       };
               });
           };
        thisImgArr(thisAllimg);
    };    
})(jQuery,window,document);
$(".loadAllImage img").Loadimage({
        sectcut:true, //图片是否可设置宽度
        load:"http://www.xipwang.cn/wp-content/uploads/2016/08/loading.gif", //在加载时出现的图标
        width:800, //当图片load完成图片最大宽度
        height:400,//当图片load完成图片最大高度
    });
</script>
</html>

评论 (0)

用户名
邮箱
评论

    Copyright © 2020 darkNightMan All Rights Reserved Pro 黔ICP备20005477号