文档章节

实现图片预加载

wshining
 wshining
发布于 2017/04/27 10:16
字数 368
阅读 9
收藏 1
点赞 0
评论 0

在页面上我们一般都是用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
博文 64
码字总数 41353
作品 0
深圳
前端工程师
利用CSS、JavaScript及Ajax实现图片预加载的三大方法

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

spademan ⋅ 2013/10/22 ⋅ 0

WEB预加载--完美用户体验

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

Cleey ⋅ 2014/02/13 ⋅ 1

利用CSS、JavaScript及Ajax实现图片预加载的三大方法

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

詹真琦 ⋅ 2013/12/08 ⋅ 1

利用简洁的图片预加载组件提升h5移动页面的用户体验

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

snowing1990 ⋅ 2016/03/15 ⋅ 1

图片的预加载

由于图片较大,在加载js脚本之前,最好实现图片的预加载。 function preLoadImg(){ var img = new Image(); img.src = url; } 这样子就实现了传入图片的url,图片实现预加载 但是此时图片的w...

崔小涣 ⋅ 2014/01/27 ⋅ 0

JavaScript 中常见设计模式-代理模式

     代理模式   情景:小明追女生 A   非代理模式:小明 =花=> 女生A   代理模式:小明 =花=> 让女生A的好友B帮忙 =花=> 女生A   代理模式的特点   代理对象和本体对象具有一...

webstack前端栈 ⋅ 06/15 ⋅ 0

浏览器兼容性学习

绑定事件: ie下面是attachEvent(on+事件) 其他为addEventListener(事件) 获取浏览器 (navigator.appName===“Microsoft Internet Explorer”) 判定是否是ie 支持canvas的判定 var ca...

崔小涣 ⋅ 2014/01/16 ⋅ 0

html+js实现图片预加载,lightbox底层原理。

在前端设计时,为了让某县页面的图片即使缓存到浏览器中,一般使用预加载技术,但更为确切的应该称为异步加载,因为对线程不会造成阻塞。 图片是网站开发部分中的静态资源,当浏览器网络请求...

IamOkay ⋅ 2014/11/02 ⋅ 0

JS三教九流系列-jquery实例开发到插件封装3

我们先写实例,然后可能需要在封装为插件,最后做更高级的处理! 封装插件基础学习 http://my.oschina.net/u/2352644/blog/487688 1-7实例地址 http://my.oschina.net/u/2352644/blog/49082...

透笔度 ⋅ 2015/08/25 ⋅ 0

使用HTML5的链接预取功能给网站提速

HTML5的链接预取功能(link prefetching)是一个埋在沙里的宝石,至今还很少人知道它的价值。 你可能已经知道了那古老而又闻名的图片预加载功能,链接预取功能就是将此概念由图片扩展到了网页内...

答复哈 ⋅ 2010/09/03 ⋅ 1

没有更多内容

加载失败,请刷新页面

加载更多

下一页

java软件工程师简历中项目经验怎么写?

作者:暗灭 链接:https://www.zhihu.com/question/20695310/answer/180691302 来源:知乎 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 直接给你贴个我自己的简历...

颖伙虫 ⋅ 21分钟前 ⋅ 0

Confluence 6 恢复一个站点有关使用站点导出为备份的说明

推荐使用生产备份策略。我们推荐你针对你的生产环境中使用的 Confluence 参考 Production Backup Strategy 页面中的内容进行备份和恢复(这个需要你备份你的数据库和 home 目录)。XML 导出备...

honeymose ⋅ 今天 ⋅ 0

JavaScript零基础入门——(九)JavaScript的函数

JavaScript零基础入门——(九)JavaScript的函数 欢迎回到我们的JavaScript零基础入门,上一节课我们了解了有关JS中数组的相关知识点,不知道大家有没有自己去敲一敲,消化一下?这一节课,...

JandenMa ⋅ 今天 ⋅ 0

火狐浏览器各版本下载及插件httprequest

各版本下载地址:http://ftp.mozilla.org/pub/mozilla.org//firefox/releases/ httprequest插件截至57版本可用

xiaoge2016 ⋅ 今天 ⋅ 0

Docker系列教程28-实战:使用Docker Compose运行ELK

原文:http://www.itmuch.com/docker/28-docker-compose-in-action-elk/,转载请说明出处。 ElasticSearch【存储】 Logtash【日志聚合器】 Kibana【界面】 答案: version: '2'services: ...

周立_ITMuch ⋅ 今天 ⋅ 0

使用快嘉sdkg极速搭建接口模拟系统

在具体项目研发过程中,一旦前后端双方约定好接口,前端和app同事就会希望后台同事可以尽快提供可供对接的接口方便调试,而对后台同事来说定好接口还仅是个开始、设计流程,实现业务逻辑,编...

fastjrun ⋅ 今天 ⋅ 0

PXE/KickStart 无人值守安装

导言 作为中小公司的运维,经常会遇到一些机械式的重复工作,例如:有时公司同时上线几十甚至上百台服务器,而且需要我们在短时间内完成系统安装。 常规的办法有什么? 光盘安装系统 ===> 一...

kangvcar ⋅ 昨天 ⋅ 0

使用Puppeteer撸一个爬虫

Puppeteer是什么 puppeteer是谷歌chrome团队官方开发的一个无界面(Headless)chrome工具。Chrome Headless将成为web应用自动化测试的行业标杆。所以我们很有必要来了解一下它。所谓的无头浏...

小草先森 ⋅ 昨天 ⋅ 0

Java Done Right

* 表示难度较大或理论性较强。 ** 表示难度更大或理论性更强。 【Java语言本身】 基础语法,面向对象,顺序编程,并发编程,网络编程,泛型,注解,lambda(Java8),module(Java9),var(...

风华神使 ⋅ 昨天 ⋅ 0

Linux系统日志

linux 系统日志 /var/log/messages /etc/logrotate.conf 日志切割配置文件 https://my.oschina.net/u/2000675/blog/908189 logrotate 使用详解 dmesg 命令 /var/log/dmesg 日志 last命令,调......

Linux学习笔记 ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部