首页 > 教程 > 关键词 > javascript教程最新资讯 > 正文

再谈javascript图片预加载技术

2011-03-11 09:12 · 稿源:Plane Art,www.planeart.cn/?p=1121

由于javascript无法获取img文件头数据,必须等待其加载完毕后才能获取真实的大小,所以lightbox类效果为了让图片居中显示,导致其速度体验要比直接输出的差很多。而本文所提到的预加载技术主要是让javascript快速获取图片头部数据的尺寸。

一段典型的使用预加载获取图片大小的例子:

var imgLoad = function (url, callback) {
var img = new Image();

img.src = url;
if (img.complete) {
callback(img.width, img.height);
} else {
img.onload = function () {
callback(img.width, img.height);
img.onload = null;
};
};

};

可以看到使用onload的方式必须等待图片加载完毕,其速度不敢恭维。

web应用程序区别于桌面应用程序,响应速度才是最好的用户体验。如果想要速度与优雅兼得,那就必须提前获得图片尺寸,如何在图片没有加载完毕就能获取图片尺寸?

十多年的上网经验告诉我:浏览器在加载图片的时候你会看到图片会先占用一块地然后才慢慢加载完毕,并且这里大部分的图片都是没有预设width与height属性的,因为浏览器能够获取图片的头部数据。基于此,只需要使用javascript定时侦测图片的尺寸状态便可得知图片尺寸就绪的状态。

实现代码:

var imgReady = function (url, callback, error) {
var width, height, intervalId, check, div,
img = new Image(),
body = document.body;

img.src = url;

// 从缓存中读取
if (img.complete) {
return callback(img.width, img.height);
};

// 通过占位提前获取图片头部数据
if (body) {
div = document.createElement('div');
div.style.cssText = 'visibility:hidden;position:absolute;left:0;top:0;width:1px;height:1px;overflow:hidden';
div.appendChild(img)
body.appendChild(div);
width = img.offsetWidth;
height = img.offsetHeight;

check = function () {
if (img.offsetWidth !== width || img.offsetHeight !== height) {
clearInterval(intervalId);
callback(img.offsetWidth, img.clientHeight);
img.onload = null;
div.innerHTML = '';
div.parentNode.removeChild(div);
};
};

intervalId = setInterval(check, 150);
};

// 加载完毕后方式获取
img.onload = function () {
callback(img.width, img.height);
img.onload = img.onerror = null;
clearInterval(intervalId);
body && img.parentNode.removeChild(img);
};

// 图片加载错误
img.onerror = function () {
error && error();
clearInterval(intervalId);
body && img.parentNode.removeChild(img);
};

};

是不是很简单?这样的方式获取摄影级别照片尺寸的速度往往是onload方式的几十多倍,而对于web普通(800×600内)浏览级别的图片能达到秒杀效果。

好了,请观赏令人愉悦的 DEMO ,通过测试的浏览器:Chrome、Firefox、Safari、Opera、IE6、IE7、IE8。

(planeArt.cn原创文章,原文地址。)

  • 相关推荐
  • 大家在看
  • 北京互联网法院:个别图片公司或律师专门从事图片维权获利

    日前北京互联网法院发布关于涉网图片类著作权案件的调研报告。报告指出,个别图片公司或者律师甚至专门从事图片维权诉讼,利用专业软件检索到侵权行为后再向图片权利人寻求授权,以提起诉讼的方式获取不正当商业利益。

  • 法院:个别图片公司诉图牟利 图片版权市场功能未能有效发挥

    今日,北京互联网法院发布数据称,北京互联网法院自 2018 年 9 月 9 日成立以来至 2020 年 6 月 30 日,共受理案件 64473 件,其中著作权案件 49855 件,占比77%,涉图片类著作权案件在所有著作权案件中的占比超过一半以上。

  • 我搜索了一张图片,又双叒叕侵权了!

    虽然国内图片市场在不断的完善中,但直到目前还是有很多人吃了图片侵权的亏。其中新闻网站等媒体侵权多发,微博、微信、博客、贴吧等平台上的自媒体用户侵权现象同样十分普遍。

  • AI数据迈入场景化时代,头部企业云测数据重建产业模式

    中国AI数据服务行业正走入场景化以及精细化时代,在政策的进一步推动以及技术的进一步成熟下,人工智能产业落地速度明显提速,中国AI数据服务行业迎来巨大的发展浪潮。iiMedia Research(艾媒咨询)发布的《 2020 年中国AI数据服务行业研究报告》主要针对商业模式、应用范围、竞争格局等领域进行市场解读、企业研究以及未来趋势预测。 中国AI核心产业市场规模将超 1500 亿元, 数据服务发展潜力不断拓展 中国AI数据服务行业现如今发

  • 取代短信!5G消息开启商用:可发图片、视频、位置

    毫无疑问,国内的5G建设已经驶入了快车道,而相应的配套应用也应该加速前进。据最新消息显示,三大运营商都已经开始启动首批5G消息应用动,而随着这个新功能的加入,或将改变灾害预报系统,为

    5G
  • 女子发摸腿动漫图片微信账户被封!腾讯:遭他人投诉构成违规

    7月20日消息,据媒体报道,家住福州的曹女士称,自己的微信账号突然被临时限制登陆,提示“该微信帐号因涉嫌传播色情/暴力/非法营销等违法内容被限制登录”需要被查封三天。曹女士

  • 用户发摸腿动漫图片微信账户被封 腾讯:遭他人投诉构成违规

    家住福州的曹女士称,自己的微信账号突然被临时限制登陆,提示“该微信帐号因涉嫌传播色情/暴力/非法营销等违法内容被限制登录”需要被查封三天。

  • 云计算核心技术Docker教程: events/inspect命令详解

    在docker客户端命令行中我们可以使用events命令从服务器获取实时事件便于查找调试问题,使用inspect命令获取容器或镜像的元数据。示例docker events : 从服务器获取实时事件语法docker events [OPTIONS]OPTIONS说明:-f :根据条件过滤事件;--since :从指定的时间戳后显示所有事件;--until :流水时间显示到指定的时间为止;例如,显示docker 2020年8月5日之后的所有事件,命令如下:$ docker events --since="2020-08-05"参数s

  • 优酷起诉电视控获赔86.5万元 因后者屏蔽片头广告

    近日,北京知识产权法院二审审结了一起不正当竞争纠纷案,案件围绕的核心之一便是关于免费观看VIP视频资源、屏蔽视频广告的问题。万凯达公司经营了一款叫做“电视控”的软件,可以将手机中播放的视频投屏到电视观看。但通过“电视控”将优酷网的视频内容投屏到电视时,可以屏蔽原视频片头的广告,而且普通用户也可以直接观看优酷网VIP视频资源。

  • Microsoft引入了新的安全技术以防止数据损坏

    【TechWeb】微软在旧金山推出了一种新的平台安全技术,以防止网络罪犯采用数据破坏技术来针对系统安全策略并篡改Windows 10设备上的数据结构。该技术称为内核数据保护(KDP),它通过基于虚拟化的安全性(VBS)保护Windows内核和驱动程序的一部分,从而防止了数据损坏攻击。据该公司称,KDP是一组API(应用程序编程接口),可将某些内核内存标记为只读,从而防止攻击者修改受保护的内存。这家科技巨头在一份声明中说:“例如,攻?

  • 新闻联播用了18年的片头换了 央视网上观看地址方法

    新闻联播用了18年的片头换了。据央视网报道,《新闻联播》于昨日( 7 月 18 日)晚间正式改版更换背景,使用了 18 年的片头迎来了“全新升级”。你有幸见证这一历史性时刻吗?升级”后的《新闻联播》片头的画面宽高比例由原来的4: 3 更换为了16:9,而且还对画面进行了高清升级,同时演播室背景也进行了更换。对此网友纷纷表示:见证历史!

  • 云计算核心技术Docker教程:pause/unpause命令详解

    在docker客户端命令行中我们可以使用pause暂停容器中所有的进程,使用unpause恢复容器中所有的进程。使用pause/unpause命令暂停正在运行的镜像容器其用途是在各个容器之间调试时使用。示例docker pause :暂停容器中所有的进程。语法docker pause [OPTIONS] CONTAINER [CONTAINER...]例如,暂停nginx容器里面的进程,命令如下:$ docker pause mynginx示例docker unpause :恢复容器中所有的进程。语法docker unpause [OPTIONS] CON

  • 互联网图片版权诉讼调研报告:31%用户直接通过搜索引擎获得相关图

    近日,北京互联网法院近日发布关于涉网图片类著作权案件的调研报告。报告指出,个别图片公司或者律师甚至专门从事图片维权诉讼,利用专业软件检索到侵权行为后再向图片权利人寻求授权,以提起诉讼的方式获取不正当商业利益。

  • 直追大鹅、薇龙,渝欣文化何以跃身MCN头部俱乐部

    导言: 6 月,“精神领袖切格瓦拉”周某人发布视频对网友道歉,希望大家不要模仿他,将回去种地,不签约任何MCN,获得大众的广泛谅解和支持。同时宣布着MCN1500 万天价签约闹剧的正式落幕。但是闹剧的背后,则折射出了MCN行业的竞争压力和乱象。那么,如果不唯流量至上,新MCN机构要如何脱颖而出,寻求自己的一席之地呢?6 月 8 日,研究机构SensorTower官微发布数据显示, 5 月份,抖音及海外版TikTok在全球AppStore和GooglePlay?

  • Chrome现已支持延迟加载网页中的iframe元素

    一年前,谷歌为 Chrome 76 引入了延迟加载图片的功能。昨日,Chrome 工程主管 Addy Osmani 又宣布,他们将在新版浏览器中启用延迟加载 iframe 元素的标准功能。在启用 <iframe loading = lazy> 属性之后,Chrome 将推迟相关元素的加载,直到用户将网页滚动到附近为止。

  • 加密货币时代来临,okex为何能够成为头部?成功其实没有秘密

    随着全球关注加密货币的人变得越来越多,想要了解和学习加密货币的人也变得广泛起来。加密货币能否替代现实货币,也成为了很多人拿关注的话题。因为加密货币拥有极高的安全性,而且它具有去中心化,不受中心化控制的属性,所以加密货币受到了一些人的青睐。看好加密货币,前提需要有一个信誉好的交易平台来进行交易。全球知名交易平台okexokex作为全球领先的加密货币交易平台,主要面向全球用户提供比特币、莱特币、以太币等150余?

  • 头部主播都在用的流量获取秘籍,建议收藏!

    ​电商直播,不仅带动了疫情后的消费,同时也为商家和企业开拓了一个新的销售渠道。在另一方面,电商直播也为某些线下品牌和传统企业拓展了品牌声量,加速了“出圈”速度。

  • 头部UP主转型做主播,B站直播不再佛系

    B站的头部UP主正在纷纷转型做主播。两天前,那位讲法考课走红、B站有史以来最快涨粉到百万的UP主罗翔老师,完成了B站直播签约后的首秀,内容也很穿越,除了网友熟知的刑法考题和“狂徒张三”,还聊到高考故事和苏格拉底。

  • 优酷怒告第三方电视软件屏蔽片头广告:成功胜诉 获赔86.5万元

    据北京知识产权法院给出的公告,万凯达公司经营了一款叫做“电视控”的软件,可以将手机中播放的视频投屏到电视观看。但通过“电视控”将优酷网的视频内容投屏到电视时,可

  • 20家头部MCN同时入驻西五街,这帮年轻人到底喜欢什么?

    80后步入中年,90后渐渐“佛系”,00后已经站在时代的聚光灯下,准备随时开启属于他们的新世界,而内容市场的猎手们,也将他们的目光锁定在成长于互联网时代的9000岁年轻人群。而作为互联网的原住民,这一届年轻人的家庭状况逐渐得到改善,他们的父母大部分是70后、80后,他们在物质条件相对优渥的条件下成长,有着天然侧成长红利,家庭的支持让他们成长为非常有条件的消费者,他们可以自己决定自己想吃什么、想要什么。相较于前浪们,这一届年

  • 参与评论
文明上网理性发言,请遵守新闻评论服务协议
  • 热门标签