再谈javascript图片预加载经典技术
图片预加载技术的典型应用:
如lightbox方式展现照片,无疑需要提前获得大图的尺寸,这样才能居中定位,由于javascript无法获取img文件头数据,必须等待其加载完毕后才能获取真实的大小然后展示出来,所以lightbox显示的图片的速度体验要比直接输出的差很多,而本文说提到的预加载技术主要针对获取图片尺寸。
一段典型的使用预加载获取图片大小的例子:
web应用程序区别于桌面应用程序,响应速度才是最好的用户体验。如果想要速度与优雅兼得,那就必须提前获得图片尺寸,如何在图片没有加载完毕就能获取图片尺寸?
一、结合flash加载图片,获取图片头部数据的尺寸
flash虽然很强大,但它与生俱来的缺点让人爱恨交织,加上很多IC交易网移动设备不支持falsh无疑更是致命的伤,还是放弃吧。
二、在服务端保存图片尺寸数据
这里不得不提到腾讯Qzone的lightbox相册,它就是这样做的。它能在图片没有加载完全的时候就居中放大图片,速度与优雅基本兼得。不过它仍然难以避免blog插入的外链图片的问题,也只能按传统的方式加载完毕才能展示。
三、javascript通过占位方式获取图片头部数据的尺寸
十多年的上网经验告诉我:IC交易网浏览器在加载图片的时候你会看到图片会先占用一块地然后才慢慢加载完毕,并且这里大部分的图片都是没有预设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);
};
};
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;
};
};
};
转载于:https://www.cnblogs.com/aspxnets/archive/2011/06/30/2095007.html
再谈javascript图片预加载经典技术相关推荐
- 转javascript图片预加载技术
今天看一篇文章,再谈javascript图片预加载技术(http://www.planeart.cn/?p=1121) http://www.qiqiboy.com/2011/05/20/javasc ...
- 3种Javascript图片预加载的方法详解
3种Javascript图片预加载的方法详解 预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度. 这对图片画廊及图片占据很大比例 ...
- imageReady 图片预加载
imageReady javascript图片预加载,监测图片加载完成,获取图片真实尺寸的组件(图片延迟加载) 如何使用 // 首先在页面中引入imageReady.js/** * @param im ...
- javascript图片浏览器的核心——图片预加载
网站开发时经常需要在某个页面需要实现对大量图片的浏览,如果考虑流量的话,大可以像pconline一样每个页面只显示一张图片,让用户每看一张图片就需要 重新下载一下整个页面.不过,在web2.0时代,更 ...
- html图片怎么预加载,如何利用CSS和Javascript实现图片预加载
说到图片预加载,想必大家已经很熟悉了,在平时的项目中,我们常用插件实现预加载,比如:懒加载lazyload插件等等.如果你想了解下lazyload,可以看下这两篇文章: 今天主要想介绍不用插件实现图片 ...
- 利用CSS、JavaScript及Ajax实现图片预加载的三大方法
预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...
- 利用CSS、JavaScript及Ajax实现图片预加载的三大方法及优缺点分析
预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...
- CSS、JavaScript和Ajax实现图片预加载的三大方法及优缺点分析
预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画 廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发 ...
- 图片预加载的问题-----有针对加载和缓存的兼容解决
网站开发时经常需要在某个页面需要实现对大量图片的浏览,如果考虑流量的话,大可以像pconline一样每个页面只显示一张图片,让用户每看一张图片就需要重新下载一下整个页面.不过,在web2.0时代,更多 ...
最新文章
- Kali学习笔记21:缓冲区溢出实验(漏洞发现)
- 计算机科学技术中的优秀案例,2014级计算机科学与技术专业ppt 大赛活动案例.doc...
- 程序间数据共享与传递(1):EXPORT/IMPORT、SAP/ABAP Memory
- webform计算某几列结果_WebForm获取checkbox选中的值(几个简单的示例)
- *[topcoder]IncrementingSequence
- SpringBoot2.1.5 (32)--- SpringBoot整合 Freemaker 模板引擎
- python画散点图-从零开始学Python【15】--matplotlib(散点图)
- URL Scheme获取帮助文档
- 关于Xcode的一些方法-15-05-02
- 如何定时备份远程mysql数据库
- 【OpenCV学习笔记】【教程翻译】二(车牌识别算法框架)
- 【bat命令-在for循环中赋值给局部变量后再输出变量时提示“ECHO 处于关闭状态。”或者“ECHO 处于打开状态。”】
- 你要的理论、法则、定律、效应都在这里了
- MSOCache文件夹能否删除?
- bad substitution
- 如何用最简单的方法创建一个超好用的微信公众号页面模板?
- 5G NR — 载波聚合
- Java面试宝典_君哥讲解笔记04_java基础面试题——String s=new String(“xyz“);创建了几个String Object、equals和hashCode、hashCode(
- 关于纳尔逊的内集理论
- redis 运维讲解01