文档章节

实现图片预加载

wshining
 wshining
发布于 2017/04/27 10:16
字数 368
阅读 9
收藏 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");
                        }
                    }
                })
            }
		}

 

© 著作权归作者所有

共有 人打赏支持
wshining
粉丝 14
博文 69
码字总数 47017
作品 0
深圳
前端工程师
私信 提问
利用CSS、JavaScript及Ajax实现图片预加载的三大方法

摘要:图片的加载速度往往影响着网站整体的用户体验,尤其对于包含大量图片的网站。对图片进行预加载,不失为一个高效的解决方案。如何实现预加载?本文将例举利用CSS、JavaScript及Ajax实现...

spademan
2013/10/22
0
0
WEB预加载--完美用户体验

原文 http://www.chenglin.name/web/js-web/391.html js实现预加载 使用JS实现网页的预加载,比如图片的呈现、web相册,预加载后别人查看图片不会重新缓冲,从而增强用户体验。达到秒杀的境界...

Cleey
2014/02/13
1K
1
react native 自定义Image实现预加载图片及错误之后图片显示

使用自定义Image直接移步到文章结尾查看使用 需要添加的第三方库,prop-types,添加如下 我们知道react native 里面的Image组件,预加载图片只实现了ios,android没有。加载错误的图片也没有...

大灰狼的小绵羊哥哥
09/14
0
0
利用CSS、JavaScript及Ajax实现图片预加载的三大方法

预加载图片是提高用户体验的一个很好方法。图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度。这对图片画廊及图片占据很大比例的网站来说十分有利,它保证...

詹真琦
2013/12/08
0
1
利用简洁的图片预加载组件提升h5移动页面的用户体验

在做h5移动页面,相信大家一定碰到过页面已经打开,但是里面的图片还未加载出来的情况,这种问题虽然不影响页面的功能,但是不利于用户体验。抛开网速的原因,解决这个问题有多方面的思路:最...

snowing1990
2016/03/15
783
1

没有更多内容

加载失败,请刷新页面

加载更多

(荷兰)彼得·冯·门施著:博物馆学研究的目的

博物馆学研究的目的 (荷)彼得·冯·门施 尽管诸多关于博物馆学认知目的的不同看法可以被归纳为数个主要群体,但没有一个群体可以被称为“学派”。一般来说,学派是由于博物馆学研究目的的不...

乔老哥
4分钟前
0
0
Vue slot的用法

之前看官方文档,由于自己理解的偏差,不知道slot是干嘛的,看到小标题,使用Slot分发内容,就以为 是要往下派发内容。然后就没有理解插槽的概念。其实说白了,使用slot就是先圈一块地,将来...

peakedness丶
16分钟前
0
0
解析如何用爬虫程序批量采集梨视频数据

本文介绍如何使用爬虫程序免费采集梨视频拍客的视频标题、链接、简介等信息。 采集字段: 视频标题 视频链接 点赞数 视频时长 发布时间 拍客 拍客链接 视频简介 标签 功能点目录: 如何对采集...

技术阿飞
22分钟前
2
0
《阿里铁军》的读书笔记和读后感范文2600字

《阿里铁军》的读书笔记和读后感范文2600字: 在中国互联网,有一个流传很广的说法是,百度强在技术,腾讯强在产品,阿里强在运营。虽然发展到今天,已经不能再用这样简单的视角来看待这三个...

原创小博客
51分钟前
5
0
怎样实际项目中运用责任链模式

1 模式概要 1.1 简介 责任链模式为请求创建一个接收者对象链,每个接收者都包含对另一个接收者的引用,如果一个对象不能处理该请求,那么它会把请求传给下一个接收者,依此类推 责任链模式避...

小刀爱编程
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部