图片加载完成执行动作的问题
<img src="a.jpg" width=120 height=120 onreadystatechange=go(this)>
<img src="b.jpg" width=120 height=120 onreadystatechange=go(this)>
<img src="c.jpg" width=120 height=120 onreadystatechange=go(this)>
<img src="d.jpg" width=120 height=120 onreadystatechange=go(this)>
<script language="javascript" type="text/javascript">
//客户端调整图片按原比例输出
var PicWidthStr = 120;
var PicHeightStr = 120;
function go(obj){
//if(obj.readyState == "complete")
//{//图片加载完毕的标志
//alert(obj.readyState);
var iobj = new Image();
iobj.src = obj.src;
//alert(iobj.width);
var width = iobj.width;
var height = iobj.height;
var hpw = height/width;
if(hpw>1)
{
if(height>PicHeightStr)
{
height = PicHeightStr;
width = Math.floor(height/hpw);
}
}
else
{
if(width>PicWidthStr)
{
width = PicWidthStr;
height = Math.floor(width*hpw);
}
}
obj.width=width;
obj.height=height;
//}
}
function gout()
{
alert("图片加载未完成!");
}
function imgstate()
{
alert(document.images);
for(i=0;i<document.images.length;i++)
{
alert(document.images[i].readyState);
}
}
imgstate();
</script>
目的是先让所有的图片都以120X120显示,然后在120X120的范围内按图片的原比例显示,这个过程在客户端用JS完成,go()就是调整函数。
问题是当页面图片较多时【我测试的时候是16幅】,就会出现部分图片没有调整的情况。
我用的是onreadystatechange()触发事件,也用onload()测试过,都有同样的问题,但是用imgstate()检测一下所有图片的状态,都是“complete”,为什么还会有没有调整的情况?
谢谢了!
<img src="b.jpg" width=120 height=120 onreadystatechange=go(this)>
<img src="c.jpg" width=120 height=120 onreadystatechange=go(this)>
<img src="d.jpg" width=120 height=120 onreadystatechange=go(this)>
<script language="javascript" type="text/javascript">
//客户端调整图片按原比例输出
var PicWidthStr = 120;
var PicHeightStr = 120;
function go(obj){
//if(obj.readyState == "complete")
//{//图片加载完毕的标志
//alert(obj.readyState);
var iobj = new Image();
iobj.src = obj.src;
//alert(iobj.width);
var width = iobj.width;
var height = iobj.height;
var hpw = height/width;
if(hpw>1)
{
if(height>PicHeightStr)
{
height = PicHeightStr;
width = Math.floor(height/hpw);
}
}
else
{
if(width>PicWidthStr)
{
width = PicWidthStr;
height = Math.floor(width*hpw);
}
}
obj.width=width;
obj.height=height;
//}
}
function gout()
{
alert("图片加载未完成!");
}
function imgstate()
{
alert(document.images);
for(i=0;i<document.images.length;i++)
{
alert(document.images[i].readyState);
}
}
imgstate();
</script>
目的是先让所有的图片都以120X120显示,然后在120X120的范围内按图片的原比例显示,这个过程在客户端用JS完成,go()就是调整函数。
问题是当页面图片较多时【我测试的时候是16幅】,就会出现部分图片没有调整的情况。
我用的是onreadystatechange()触发事件,也用onload()测试过,都有同样的问题,但是用imgstate()检测一下所有图片的状态,都是“complete”,为什么还会有没有调整的情况?
谢谢了!
...全文
相关推荐
js实现图片在未加载完成前显示加载中字样
首先判断浏览器再判断图片是否加载完成,如果还未加载就显示“加载中...”,思路及代码如下
javascript图片预加载完整实例
主要介绍了javascript图片预加载实现方法,以完整实例形式分析了JavaScript图片预加载显示的实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下
JS图片预加载 JS实现图片预加载应用
由于图片加载慢,导致用户体验特别差,本文将介绍一种图片预加载技术,需要了解的朋友可以参考下
加载动画图片
加载动画的图片以及wifi图片组,总共31张图片
详解性能更优越的小程序图片懒加载方式
主要介绍了详解性能更优越的小程序图片懒加载方式,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧


