php预加载图片,图片预加载的一个简明例子
图片预加载技术的典型应用:如lightbox方式展现照片,无疑需要提前获得大图的尺寸,这样才能居中定位,由于javascript无法获取img文件头数据,必须等待其加载完毕后才能获取真实的大小然后展示出来,所以lightbox显示的图片的速度体验要比直接输出的差很多,而本文说提到的预加载技术主要针对获取图片尺寸。
效果演示
imgReady
图片头数据加载就绪事件
下载:
演示:
显示图片
清空缓存
(浏览器会缓存加载过后的图片)
通过文件头信息获取尺寸:
通过加载完毕后获取尺寸:
一段典型的使用预加载获取图片大小的例子:
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;
};
};
};
web应用程序区别于桌面应用程序,响应速度才是最好的用户体验。如果想要速度与优雅兼得,那就必须提前获得图片尺寸,如何在图片没有加载完毕就能获取图片尺寸?
结合flash加载图片,获取图片头部数据的尺寸?
flash虽然很强大,但它与生俱来的缺点让人爱恨交织,加上很多移动设备不支持falsh无疑更是致命的伤,还是放弃吧。
在服务端保存图片尺寸数据?
这里不得不提到腾讯Qzone的lightbox相册,它就是这样做的。它能在图片没有加载完全的时候就居中放大图片,速度与优雅基本兼得。不过它仍然难以避免blog插入的外链图片的问题,也只能按传统的方式加载完毕才能展示。
javascript通过占位方式获取图片头部数据的尺寸?
十多年的上网经验告诉我:浏览器在加载图片的时候你会看到图片会先占用一块地然后才慢慢加载完毕,并且这里大部分的图片都是没有预设width与height属性的,因为浏览器能够获取图片的头部数据。基于此,只需要使用javascript定时侦测图片的尺寸状态便可得知图片尺寸就绪的状态。
实现代码:
// imgReady event - 2011.04.02 - TangBin - MIT Licensed
/**
* 图片头数据加载就绪事件
* @see http://www.planeart.cn/?p=1121
* @param {String} 图片路径
* @param {Function} 尺寸就绪 (参数1接收width; 参数2接收height)
* @param {Function} 加载完毕 (可选. 参数1接收width; 参数2接收height)
* @param {Function} 加载错误 (可选)
*/
var imgReady = (function () {
var list = [], intervalId = null,
// 用来执行队列
tick = function () {
var i = 0;
for (; i < list.length; i++) {
list[i].end ? list.splice(i--, 1) : list[i]();
};
!list.length && stop();
},
// 停止所有定时器队列
stop = function () {
clearInterval(intervalId);
intervalId = null;
};
return function (url, ready, load, error) {
var check, width, height, newWidth, newHeight,
img = new Image();
img.src = url;
// 如果图片被缓存,则直接返回缓存数据
if (img.complete) {
ready(img.width, img.height);
load && load(img.width, img.height);
return;
};
// 检测图片大小的改变
width = img.width;
height = img.height;
check = function () {
newWidth = img.width;
newHeight = img.height;
if (newWidth !== width || newHeight !== height ||
// 如果图片已经在其他地方加载可使用面积检测
newWidth * newHeight > 1024
) {
ready(newWidth, newHeight);
check.end = true;
};
};
check();
// 加载错误后的事件
img.onerror = function () {
error && error();
check.end = true;
img = img.onload = img.onerror = null;
};
// 完全加载完毕的事件
img.onload = function () {
load && load(img.width, img.height);
!check.end && check();
// IE gif动画会循环执行onload,置空onload即可
img = img.onload = img.onerror = null;
};
// 加入队列中定期执行
if (!check.end) {
list.push(check);
// 无论何时只允许出现一个定时器,减少浏览器性能损耗
if (intervalId === null) intervalId = setInterval(tick, 40);
};
};
})();
php预加载图片,图片预加载的一个简明例子相关推荐
- Jquery背景图片的预加载
Jquery背景图片的预加载 //定义预加载图片列表的函数(有参数) jQuery.preloadImages = function(){ //遍历图片 for(var i = 0; i&l ...
- 预加载显示图片的艺术
一般情况下网页中的图片都是随文档流依次加载的,什么时候用到则什么时候加载,但是有些时候这样的加载方式往往会影响用户体验,比如鼠标hover变换背景图片的时候,只有鼠标移入才会对变换的图片进行加载,这样 ...
- mfc cimage加载显示图片_在微信小程序里实现图片预加载组件
网页中的图片预加载 我们知道在 Web 页面中实现图片的预加载其实很简单,通常的做法是在 JS 中使用 Image 对象即可,代码大致如下 var image = new Image() image. ...
- 搞清Image加载事件(onload)、加载状态(complete)后,实现图片的本地预览,并自适应于父元素内(完成)...
onload与complete介绍 complete只是HTMLImageElement对象的一个属性,可以判断图片加载完成,不管图片是不是有缓存:而onload则是这个Image对象的load事件回 ...
- jquery 当页面图片加载之后_图片的懒加载和预加载
一.懒加载 [1.1]什么是懒加载? 懒加载也就是延迟加载,指的是在长网页中延迟加载图像,是一种很好优化网页性能的方式.当访问一个页面的时候,先把img元素或是其他元素的背景图片路径替换成一张大小为1 ...
- 小程序实现图片预加载(图片延迟加载)
这几天搞百度小程序,对接的网站需要展示大量图片,并且图片都是高清图片,因为要同步支持pc和手机站,在开发者工具中测试的时候,图片都是瞬间加载,因此感觉不出什么,但是真机预览的时候,特别是4G情况下,会 ...
- 图片无序预加载技术一
看视频记录一下. 预加载分为无序预加载和有序预加载. demo1.html <!DOCTYPE html> <html lang="en"> <hea ...
- img预加载获取图片大小方法
img预加载获取图片大小方法 // 更新: // 05.27: 1.保证回调执行顺序:error > ready > load:2.回调函数this指向img本身 // 04-02: 1. ...
- 图片预加载学习(二):有序加载之图片切换
基本效果同前一篇,业务有所变化:前一篇是先显示进度条待所有的图片加载完成了再显示图片,这一篇是先显示第一张图片然后依次加载其他图片(比较适合于有内容的图片,人在看第一张图片时程序默默的加载后面的图片) ...
最新文章
- Python数据挖掘:绘制直方图,设置上下限和步长,绘制子图
- struts2 form标签加上validate=true就出错的解决办法
- 使用 Redis Stream 实现消息队列
- python 无序列表中第k大元素_Python要求O(n)复杂度求无序列表中第K的大元素实例...
- python try exception类_python——异常类型
- 【转】javascript弹出固定大小的窗口页面
- Jupyter Notebook界面也可以如此炫酷?有人把Notebook玩出了新花样
- 一步一步打造基于TICK的工业级系统监控平台
- shell 构建脚本基础
- 计算机怎么打不开照相机图片,Win10系统相机打不开怎么办-电脑自学网
- 笔记本上怎么怎么暂停cmd打印窗口
- Linux下抓取log的方法
- 信创大事件 | 2022“国民云计算品牌”正式放榜
- ABAP BDC使用EXCEL模板批量修改物料
- rimraf 命令快速删除 node_modules 包
- qt 5.13.2 在湖南麒麟下的运行报错解决方案
- C指针与指针之间的相减操作
- LeetCode刷题之575.分糖果
- maven项目查询jar依赖的网址
- 稳压管稳压电路基本理解