function AutoResizeImage(maxWidth,maxHeight,objImg){
var img = new Image();
//img.src = objImg.src;//如果放在onload前面则IE会先去读取图片缓存
img.onload=function(){
var hRatio;
var wRatio;
var Ratio = 1;
var w = img.width;
var h = img.height;
wRatio = maxWidth / w;
hRatio = maxHeight / h;
if (maxWidth ==0 && maxHeight==0){
Ratio = 1;
}else if (maxWidth==0){//
if (hRatio<1) Ratio = hRatio;
}else if (maxHeight==0){
if (wRatio<1) Ratio = wRatio;
}else if (wRatio<1 || hRatio<1){
Ratio = (wRatio<=hRatio?wRatio:hRatio);
}
if (Ratio<1){
w = w * Ratio;
h = h * Ratio;
}
objImg.height = h;
objImg.width = w;
objImg.style.marginLeft = (nextWidth-objImg.width)/2+'px';
//objImg.style.marginTop = (nextHeight-objImg.height)/2+'px';
}
img.src = objImg.src;//放置在onload方法声明之后
}
我把onload写到前面去,先告诉浏览器如何处理这张图片,再指定这张图片的源,这样就正常了。所以,不是IE没有触发onload事件,而是因为加载缓冲区的速度太快,以至于没有运行到img.onload的时候,onload事件已经触发了。这让我想到了Ajax,我们在写xmlhttp的时候,都是先指定onstatechange的回调函数,然后再send数据的,道理是一样的。由此也总结出了个规律,IE下面从缓存里加载出啦的图片是不执行onload事件的
分享到:
相关推荐
脱离document.onload和window.onload的onload事件,可多次添加加载事件!
但IE在第二次显示图片的时候,总是不走 onload 方法。代码: var img = new Image(); img.src = "loading.gif"; img.onload = function(){ var iheight = img.height; var iwidth = img.width; }; 后来给xiaoniu...
有需要的朋友是最好的参考资料。希望有所帮助!
我们知道,在javascript中用来执行页面加载中的操作时候,我们会使用windows.onload=function(){}或者windows.onload=函数名(),也可以在body中调用onload事件调用方法即可,在jQuery中也有相当的代码
window.onload insertAfter()
image-size使用该插件,可以在图片onload之前获取图片的大小,在瀑布流布局中,应该可能会有用处。###实现原理:使用轮询,在图片onload之前,获取到图片大小。如果图片已经被缓存过,直接返回相关信息。回调参数...
– function addImg(isrc) { var Img = new Image(); Img.src = isrc; Img.onload = function () { document.body.appendChild(Img); } } //–> [removed] 当包含上述代码的页面打开时并不载入 “tt.jpg” ,当点击...
NULL 博文链接:https://snandy.iteye.com/blog/666530
仅img元素创建后不添加到文档中会执行onload事件的解决方法,需要的朋友可以参考下。
故事模式实现是只加载当前浏览的照片和它下面的两张照片,加载照片的时候才会加载和渲染评论区,图片没有加载前会用一个一象素的图片占位,并用一个loading类将显示出一个loading背景图,判断在可视区的时候替换成...
在web开发在获取图片宽高是很正常的事情,图片在加载完成前是获取不到图片的宽高的,在加载完成后才可以获取图片本身的宽高,例如: 代码如下:var img = new Image();img.src = “loading.gif”;img.onload = ...
基于jquery开发的一个小插件,主要作用是绑定图片(img标签)的onload事件,如果是纯JavaScript开发,可借鉴下面的代码: var imgLoad = function (url, callback) { var img = new Image(); img.src = url; if ...
<!... <TITLE> New Document ... var image=new Image();... image.src=ImgD.src;... if(image.width > maxW... <IMG id=uploadimage height=0 width=0 src="" onload="javascript:DrawImage(this);" > </HTML>
判断iframe是否加载完成的完美方法IE 支持 iframe 的 onload 事件,不过是隐形的,需要通过 attachEvent 来注册。 第二种方法比第一种方法更完美(采用readystatechange判断),因为 readystatechange 事件相对于 load...
主要介绍了IE8中动态创建script标签onload无效的解决方法,涉及针对javascript加载顺序的调整,具有一定的参考借鉴价值,需要的朋友可以参考下
3.拿到Image对象的高宽,按比例计算出想要的高宽(使用image.onload解决各浏览器不兼容拿不到Image对象高宽的问题) 4.按照计算好之后高宽将图片在canvas上绘制出来 5.通过canvas的toDataURL拿到一个转换后的base...
JS 读取Excel文件(xls) 兼容Chrome/IE/Firefox 文章配套工具
主要介绍了windows.onload()与$(document).ready()的区别