实现图片预加载
博客专区 > wshining 的博客 > 博客详情
实现图片预加载
wshining 发表于7个月前
实现图片预加载
  • 发表于 7个月前
  • 阅读 4
  • 收藏 1
  • 点赞 0
  • 评论 0

腾讯云 新注册用户 域名抢购1元起>>>   

在页面上我们一般都是用img标签加载图片,但是当图片加载过多时,页面出现了,但是加载的图片还没出来,导致页面显示的效果混乱,所以一般都是使用图片预加载,当图片加载好了后,才放到页面里面。

方法一:在div中动态添加img标签

原理:首先div中显示背景图片,当图片加载好后添加到div的标签中去

html代码如下

<div class="canvas" data-src="images/product/product1.png" ></div>

CSS代码如下

.canvas {
    width: 100px;
    min-height: 100px;
    background: #fff url("../images/loading.gif") center center no-repeat;
    background-size: 15px auto;
}

JS代码如下

var load={
        loadCanvas:function(){
            var that=this;
            $("#productul").find(".canvas").each(function(index, el) {
                var imgSrc = $(this).data("src");
                var _this=$(this);
                that.loadImage(imgSrc,aa);
                function aa(){
                    $(_this).append(this);
                    $(_this).css("background","none");
                };
            });
        },
        loadImage:function(url,callback){
            var img = new Image(); //创建一个Image对象,实现图片的预下载 
            img.src = url; 
            if (img.complete) { // 如果图片已经存在于浏览器缓存,直接调用回调函数 
                callback.call(img); 
                return; // 直接返回,不用再处理onload事件 
            }  
            img.onload = function () { //图片下载完毕时异步调用callback函数。 
                callback.call(img);//将回调函数的this替换为Image对象 
            };
        },
    };

方法二:使用canvas

html代码如下

<canvas data-src="images/product/product1.png" ></canvas>
loadCanvas:function(){
		 var imglength = $("#productul").find("canvas").length;
            if (imglength > 0) {
                $("#productul").find("canvas").each(function () {
                    var imgSrc = $(this).data("src");
                    var imageObj = new Image();
                    imageObj.canvs = $(this)[0];
                    var cvs = imageObj.canvs.getContext('2d');
                    if (cvs) {
                        imageObj.src = imgSrc;
                        imageObj.onload = function () {
                            imageObj.canvs.width = this.width;
                            imageObj.canvs.height = this.height;
                            cvs.drawImage(this, 0, 0);
                            $(imageObj.canvs).css("background-image", "none");
                        }
                    }
                })
            }
		}

 

标签: 图片预加载
共有 人打赏支持
粉丝 14
博文 58
码字总数 39493
×
wshining
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: