imageReady

javascript图片预加载，监测图片加载完成，获取图片真实尺寸的组件（图片延迟加载）

如何使用

// 首先在页面中引入imageReady.js/**
 * @param img string|Image 图片url或者Image对象
 * @param onready Function 图片尺寸已获取（此时图片还未完全下载下来）
 * @param onload Function 图片加载完成
 * @param onerror Function 图片加载失败
 *
 * onready、onload、onerror的参数只有一个，都是Image对象
 */imageReady=function(img, onready, onload, onerror){}//调用
imageReady('http://www.planeart.cn/demo/imgReady/vistas24.jpg',function(img){console.log('图片已经ready了，可以获取宽高了')},function(img){console.log('图片已经下载完成了')},function(img){console.log('图片下载出错了')}
);/* 如果图片可以获取，则输出：
 * 图片已经ready了，可以获取宽高了
 * 图片已经下载完成了
 *//* 如果图片地址不可用或者网络不可用，则输出：
 * 图片下载出错了
 */

demo地址

请点击http://u.boy.im/imageReady/

imageReady 图片预加载相关推荐

再谈javascript图片预加载经典技术
图片预加载技术的典型应用: 如lightbox方式展现照片,无疑需要提前获得大图的尺寸,这样才能居中定位,由于javascript无法获取img文件头数据,必须等待其加载完毕后才能获取真实的大小然后展 ...
javascript图片浏览器的核心——图片预加载
网站开发时经常需要在某个页面需要实现对大量图片的浏览,如果考虑流量的话,大可以像pconline一样每个页面只显示一张图片,让用户每看一张图片就需要重新下载一下整个页面.不过,在web2.0时代,更 ...
转javascript图片预加载技术
今天看一篇文章,再谈javascript图片预加载技术(http://www.planeart.cn/?p=1121) http://www.qiqiboy.com/2011/05/20/javasc ...
图片预加载的问题-----有针对加载和缓存的兼容解决
网站开发时经常需要在某个页面需要实现对大量图片的浏览,如果考虑流量的话,大可以像pconline一样每个页面只显示一张图片,让用户每看一张图片就需要重新下载一下整个页面.不过,在web2.0时代,更多 ...
页面加载成功后调用_在微信小程序里实现图片预加载组件
网页中的图片预加载我们知道在 Web 页面中实现图片的预加载其实很简单,通常的做法是在 JS 中使用 Image 对象即可,代码大致如下 var image = new Image() image. ...
利用CSS、JavaScript及Ajax实现图片预加载的三大方法
预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...
关于图片预加载的思考
引子: 很多时候,我们在写html页面的时候,当需要在页面中加入图片时,我们很自然地把图片直接用<img>标签放在了<body>里面,这本来是没有多大问题的. 但是当图片数量很 ...
利用CSS、JavaScript及Ajax实现图片预加载的三大方法及优缺点分析
预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...
mfc cimage加载显示图片_在微信小程序里实现图片预加载组件
网页中的图片预加载我们知道在 Web 页面中实现图片的预加载其实很简单,通常的做法是在 JS 中使用 Image 对象即可,代码大致如下 var image = new Image() image. ...

imageReady 图片预加载

imageReady

如何使用

demo地址

imageReady 图片预加载相关推荐

最新文章

热门文章