请教JQUERY如何实现这样效果

[gekiranger]

图片默认显示读取动画，在图片下载完毕并缩放完成后，不再显示读取动画而直接显示图片。

在网上找到一个叫image-resize的JQUERY插件来实现快捷缩放，可是找不到办法判断图片是否已经下载完毕。请问怎样做到，或者说有专门的其他插件？

[似梦飞花]

var img=new Image(); img.onload=function(){ //取消动画 //缩放图片 } img.src='...' 类似这样试试

[gekiranger]

引用 2 楼 qwklove 的回复:

楼主想要的功能应该是“图片预加载”，参考如下： http://www.planeart.cn/?p=1121

水平有限里面的代码看得不算太明白，可是原理应该大概知道，使用一个TIMER随时监控IMG的尺寸，当IMG的尺寸不为0的时候就显示图片，这样就不会在图片完全下载再显示体验那么差，是这个意思吗？

[阿鱼]

楼主想要的功能应该是“图片预加载”，参考如下： http://www.planeart.cn/?p=1121

[gekiranger]

引用 7 楼 qwklove 的回复:

[quote=引用 6 楼 gekiranger 的回复:] [quote=引用 4 楼 qwklove 的回复:] [quote=引用 3 楼 gekiranger 的回复:] [quote=引用 2 楼 qwklove 的回复:] 楼主想要的功能应该是“图片预加载”，参考如下： http://www.planeart.cn/?p=1121

水平有限里面的代码看得不算太明白，可是原理应该大概知道，使用一个TIMER随时监控IMG的尺寸，当IMG的尺寸不为0的时候就显示图片，这样就不会在图片完全下载再显示体验那么差，是这个意思吗？[/quote] 检测尺寸是对的，但不是为了让图片完全下载再显示，主要是为了提前获取图片尺寸执行一些回调函数[/quote] 主要是看不懂里面的回调函数有什么作用[/quote] imgReady最后返回的是个函数，函数中由几个参数：

/**
 * url     {String}    图片路径
 * ready   {Function}  尺寸就绪
 * load    {Function}  加载完毕 (可选)
 * error   {Function}  加载错误 (可选)
 * @example imgReady('http://www.google.com.hk/intl/zh-CN/images/logo_cn.png', function () {
        alert('size ready: width=' + this.width + '; height=' + this.height);
    });
 */

参数ready,load,error都是回调函数。 example中的“function(){alert('size ready: width='.....)}”这就是个回调函数，imgReady执行时传给参数ready。只不过这个回调函数很简单而已（只是把图的尺寸出来）。 再举个例子： 比如弹出一窗口，窗口中有图片，那你就可以使用这个“预加载函数”以最快的速度获取图片尺寸并根据尺寸定义好窗口的大小，然后等待图片显示完全即可。获取尺寸定义窗口的整个执行过程就是一个回调，你需要把它定义为一个函数然后作为参数ready传入imgReady。 [/quote] 原来如此……感谢您的指教

[阿鱼]

引用 8 楼 gekiranger 的回复:

不谢 不谢~结贴给分就好啦~~

[阿鱼]

引用 3 楼 gekiranger 的回复:

[quote=引用 2 楼 qwklove 的回复:] 楼主想要的功能应该是“图片预加载”，参考如下： http://www.planeart.cn/?p=1121

水平有限里面的代码看得不算太明白，可是原理应该大概知道，使用一个TIMER随时监控IMG的尺寸，当IMG的尺寸不为0的时候就显示图片，这样就不会在图片完全下载再显示体验那么差，是这个意思吗？[/quote] 检测尺寸是对的，但不是为了让图片完全下载再显示，主要是为了提前获取图片尺寸执行一些回调函数

[gekiranger]

引用 4 楼 qwklove 的回复:

[quote=引用 3 楼 gekiranger 的回复:] [quote=引用 2 楼 qwklove 的回复:] 楼主想要的功能应该是“图片预加载”，参考如下： http://www.planeart.cn/?p=1121

水平有限里面的代码看得不算太明白，可是原理应该大概知道，使用一个TIMER随时监控IMG的尺寸，当IMG的尺寸不为0的时候就显示图片，这样就不会在图片完全下载再显示体验那么差，是这个意思吗？[/quote] 检测尺寸是对的，但不是为了让图片完全下载再显示，主要是为了提前获取图片尺寸执行一些回调函数[/quote] 执行一些回调函数是什么意思……不太懂……

[gekiranger]

引用 4 楼 qwklove 的回复:

[quote=引用 3 楼 gekiranger 的回复:] [quote=引用 2 楼 qwklove 的回复:] 楼主想要的功能应该是“图片预加载”，参考如下： http://www.planeart.cn/?p=1121

水平有限里面的代码看得不算太明白，可是原理应该大概知道，使用一个TIMER随时监控IMG的尺寸，当IMG的尺寸不为0的时候就显示图片，这样就不会在图片完全下载再显示体验那么差，是这个意思吗？[/quote] 检测尺寸是对的，但不是为了让图片完全下载再显示，主要是为了提前获取图片尺寸执行一些回调函数[/quote] 主要是看不懂里面的回调函数有什么作用

[阿鱼]

引用 6 楼 gekiranger 的回复:

[quote=引用 4 楼 qwklove 的回复:] [quote=引用 3 楼 gekiranger 的回复:] [quote=引用 2 楼 qwklove 的回复:] 楼主想要的功能应该是“图片预加载”，参考如下： http://www.planeart.cn/?p=1121

水平有限里面的代码看得不算太明白，可是原理应该大概知道，使用一个TIMER随时监控IMG的尺寸，当IMG的尺寸不为0的时候就显示图片，这样就不会在图片完全下载再显示体验那么差，是这个意思吗？[/quote] 检测尺寸是对的，但不是为了让图片完全下载再显示，主要是为了提前获取图片尺寸执行一些回调函数[/quote] 主要是看不懂里面的回调函数有什么作用[/quote] imgReady最后返回的是个函数，函数中由几个参数：

/**
 * url     {String}    图片路径
 * ready   {Function}  尺寸就绪
 * load    {Function}  加载完毕 (可选)
 * error   {Function}  加载错误 (可选)
 * @example imgReady('http://www.google.com.hk/intl/zh-CN/images/logo_cn.png', function () {
        alert('size ready: width=' + this.width + '; height=' + this.height);
    });
 */

参数ready,load,error都是回调函数。 example中的“function(){alert('size ready: width='.....)}”这就是个回调函数，imgReady执行时传给参数ready。只不过这个回调函数很简单而已（只是把图的尺寸出来）。 再举个例子： 比如弹出一窗口，窗口中有图片，那你就可以使用这个“预加载函数”以最快的速度获取图片尺寸并根据尺寸定义好窗口的大小，然后等待图片显示完全即可。获取尺寸定义窗口的整个执行过程就是一个回调，你需要把它定义为一个函数然后作为参数ready传入imgReady。