lightbox类效果为了让图片居中显示而使用预加载,需要等待完全加载完毕才能显示,体验不佳(如filick相册的全屏效果)。javascript无法获取img文件头数据,真的是这样吗?本文通过一个巧妙的方法让javascript获取它。
这是大部分人使用预加载获取图片大小的例子:
01
|
var
imgLoad =
function
(url, callback) {
|
02
|
var
img =
new
Image();
|
06
|
callback(img.width, img.height);
|
08
|
img.onload =
function
() {
|
09
|
callback(img.width, img.height);
|
可以看到上面必须等待图片加载完毕才能获取尺寸,其速度不敢恭维,我们需要改进。
web应用程序区别于桌面应用程序,响应速度才是最好的用户体验。如果想要速度与优雅兼得,那就必须提前获得图片尺寸,如何在图片没有加载完毕就能获取图片尺寸?
十多年的上网经验告诉我:浏览器在加载图片的时候你会看到图片会先占用一块地然后才慢慢加载完毕,并且不需要预设width与height属性,因
为浏览器能够获取图片的头部数据。基于此,只需要使用javascript定时侦测图片的尺寸状态便可得知图片尺寸就绪的状态。
当然实际中会有一些兼容陷阱,如width与height检测各个浏览器的不一致,还有webkit new Image()建立的图片会受以处在加载进程中同url图片影响,经过反复测试后的最佳处理方式:
18
|
var
imgReady = (
function
() {
|
19
|
var
list = [], intervalId =
null
,
|
24
|
for
(; i < list.length; i++) {
|
25
|
list[i].end ? list.splice(i--, 1) : list[i]();
|
27
|
!list.length && stop();
|
32
|
clearInterval(intervalId);
|
36
|
return
function
(url, ready, load, error) {
|
37
|
var
onready, width, height, newWidth, newHeight,
|
45
|
load && load.call(img);
|
53
|
img.onerror =
function
() {
|
54
|
error && error.call(img);
|
56
|
img = img.onload = img.onerror =
null
;
|
60
|
onready =
function
() {
|
62
|
newHeight = img.height;
|
63
|
if
(newWidth !== width || newHeight !== height ||
|
65
|
newWidth * newHeight > 1024
|
74
|
img.onload =
function
() {
|
77
|
!onready.end && onready();
|
79
|
load && load.call(img);
|
82
|
img = img.onload = img.onerror =
null
;
|
89
|
if
(intervalId ===
null
) intervalId = setInterval(tick, 40);
|
调用例子:
2
|
alert(
'size ready: width='
+
this
.width +
'; height='
+
this
.height);
|
是不是很简单?这样的方式获取摄影级别照片尺寸的速度往往是onload方式的几十多倍,而对于web普通(800×600内)浏览级别的图片能达到秒杀效果。看了这个再回忆一下你见过的web相册,是否绝大部分都可以重构一下呢?好了,请观赏令人愉悦的 DEMO :
http://www.planeart.cn/demo/imgReady/
分享到:
相关推荐
而本文所提到的预加载技术主要是让javascript快速获取图片头部数据的尺寸。一段典型的使用预加载获取图片大小的例子: 代码如下: var imgLoad = function (url, callback) { var img = new Image(); img.src = url; ...
本文将分享三个不同的预加载技术,来增强网站的性能与可用性。 方法一:用CSS和JavaScript实现预加载 实现预加载图片有很多方法,包括使用CSS、JavaScript及两者的各种组合。这些技术可根据不同设计场景设计出相应的...
本文将分享三个不同的预加载技术,来增强网站的性能与可用性。 方法一:用CSS和JavaScript实现预加载 实现预加载图片有很多方法,包括使用CSS、JavaScript及两者的各种组合。这些技术可根据不同设计场景设计出相应的...
这里用到的技术主要是图片预加载。图片预加载的原理并不难,当给一个Image对象设置src属性后,图片就开始加载。给Image对象指定事件要位于设置src属性之前。 涉及到的内容 1.需要预加载的图片并不仅仅只是一张,...
本篇文章主要介绍了懒加载和预加载两种技术的解析,废话不多说,一起来看吧。 懒加载也叫延迟加载:前一篇文章有介绍:JS图片延迟加载 延迟加载图片或符合某些条件时才加载某些图片。 预加载:提前加载图片,当用户...
图片预加载是web开发中一种应用相当广泛的技术,比如我们在做图片翻转显示等特效的时候,为了让图片在转换的时候不出现等待,我们最好是先让图片下载到本地,然后在继续执行后续的操作。今天本文主要介绍的是利用JS...
本文是给大家分享一段简单的实现图片预加载技术的javascript代码,超级精简,却很实用,这里推荐给大家
本文将分享三个不同的预加载技术,来增强网站的性能与可用性。 方法一:用CSS和JavaScript实现预加载 实现预加载图片有很多方法,包括使用CSS、JavaScript及两者的各种组合。这些技术可根据不同设计场景设计出相应...
方法一:用CSS和JavaScript实现预加载 实现预加载图片有很多方法,包括使用CSS、JavaScript及两者的各种组合。这些技术可根据不同设计场景设计出相应的解决方案,十分高效。 单纯使用CSS,可容易、高效地预加载图片...
预装载就是一种在需要图片之前就将图片下载到缓存的技术。采用这样的方式可以使当确实需要显示图片时迅速将其从缓存中恢复回来并立即显示。 Image()对象 最简单的图像预装载办法是使用JavaScript新建一个新的Im
在这个示例中,我们首先定义了一个包含三个 base64 编码图片的数组 images,然后使用 JavaScript 获取 HTML 中的图片和按钮元素,并设置初始...同时,如果有大量图片需要切换,也可以使用图片预加载等技术来优化性能。
下拉滚动条到一定位置预加载图片,滚动条拉到最底下的时候渲染html; 鼠标移到菜单,切换各个图片列表; 鼠标移到图片列表上,显示详细信息; 技术实现方案: 先梳理一下从加载到显示的流程: 1. 加载...
不管是浏览器的开发者还是普通web应用的开发者,他们都在做...有很多已知的技术都可以让你的网站速度变得更快:使用CSS sprites,使用图片优化工具,使用.htaccess设置页面头信息和缓存时间,JavaScript压缩,使用CDN等
图片预加载是一种常用技术,如果直接给某个img标签节点设置src属性,由于图片过大或者网络不佳,图片的位置往往有段时间会有空白。常见的做法事先用一张loading图片占位,然后异步加载图片,待图片加载完成
这与图片预加载的处理方式正好是相反的。 在包含很多大图片长页面中延迟加载图片可以加快页面加载速度. 浏览器将会在加载可见图片之后即进入就绪状态. 在某些情况下还可以帮助降低服务器负担,这样势必会引起速度...
网络资源管理,支持预加载、动态加载 时间调度系统,可控制帧率,游戏速度等 自适应Web Audio和Audio Tag,适配性更高的声音管理功能 提供了表格、拉条、滚动视图等丰富的界面控件 提供了游戏与HTML...
7.4 Facebook风格的图片预加载 7.5 检查图片src是否有效 7.6 上下滑动的图片 7.7 淡入淡出一幅图片,进入另一幅图片 7.8 获取图片原生尺寸的方法 7.9 检查图像是否已经被完全加载 7.10 单击改变背景图案 7.11 如何...
全栈学习 Demo 大合集 说明: :hundred_points: 本项目包含常用的技术点和技术栈,时间为 2020 年度最新的技术栈,大范围的包含(Vue,Vuex,SSR,vue 源码解析,vue 实战,vue 单元测试,ts,React 入门,react ...图片预加载 ->