You are here
用JS 判断图片已经加载完成(兼容IE 和 Firefox) 宽度 高度 有大用
js动态获取图片的宽度和高度像素值
js 判断图片已经加载完成 是一个很常见的问题，网上也有很多的解决方案。但是运行后很多都不兼容，或者
说，存在一些奇怪的问题。一种解决方案是都用onload。因为onload 在ie 下有同步方面的问题。
所以，我用了 onreadystatechange 。 代码和 使用方法如下：
<script>
function SImage(callback)
{
var img = new Image();
this.img = img;
var appname = navigator.appName.toLowerCase();
if (appname.indexOf("netscape") == -1)
{
//ie
img.onreadystatechange = function () {
if (img.readyState == "complete")
{
callback(img);
}
};
} else {
//firefox
img.onload = function () {
if (img.complete == true)
{
callback(img);
}
}
}
}
SImage.prototype.get = function (url)
{
this.img.src = url;
}
var img = new SImage(icall);
img.get("http://space.cnblogs.com/images/logo.gif");
function icall(obj)
{
alert(obj.width);
}
</script>
一、背景
1、后台数据表在设计的时候，对于每张图片，没有记录其宽度和高度的像素值。
2、图片的宽度和高度有不同的size，比如，A类型的图片是700*500像素，B类型的图片是700*1000像素
3、在前台有一块700*500像素的固定大小的图片展示区，用于展示各种size的图片
4、A类型的图片正常展示，B类型的图限高展示，即展示成350*500像素
5、无法通过其他字段区分A类型图片和B类型图片（如果在设计数据表的时候记录了图片的宽度和高度该多好……）
二、解决办法
需要在前台用js根据图片的宽度和高度的像素值，来判断图片是A类型的还是B类型的。
考虑用ajax异步加载，当图片加载成功后，计算宽度和高度的像素值，然后在HTML的img标签中设置图片的width和height属性。
代码如下：
- /** 动态获取图片的宽度和高度的像素值
- *
- * @param sUrl 图片的url
- * @param fCallback 回调函数，fCallback至少有一个类型为object类型的参数用来接收图片的宽、高、url
- *
- * usage:
- * var url = "http://mat1.gtimg.com/datalib_img//11-05-26/c/c21ff1138e7349859b49b99312d05baf.jpg";
- * FGetImg(url, function(img){alert('width:'+img.width+";height:"+img.height+";url:"+img.url);});
- *
- */
- //切记这里的 fCallback 的回调函数是ajax的异步加载功能
- var FGetImg = function(sUrl, fCallback)
- {
- var img = new Image();
- img.src = sUrl + '?t=' + Math.random(); //IE下，ajax会缓存，导致onreadystatechange函数没有被触发，所以需要加一个随机数
- if (FBrowser.isIE)
- {
- img.onreadystatechange = function()
- {
- if (this.readyState=="loaded" || this.readyState=="complete")
- {
- fCallback({width:img.width, height:img.height, url:sUrl});
- }
- };
- }else if (FBrowser.isFirefox || FBrowser.isSafari || FBrowser.isOpera || FBrowser.isChrome)
- {
- img.onload = function()
- {
- fCallback({width:img.width, height:img.height, url:sUrl});
- };
- }
- else
- {
- fCallback({width:img.width, height:img.height, url:sUrl});
- }
- };
来自 http://blog.csdn.net/sunlylorn/article/details/6459870
js 判断图片已经加载完成 是一个很常见的问题，网上也有很多的解决方案。但是运行后很多都不兼容，或者
说，存在一些奇怪的问题。一种解决方案是都用onload。因为onload 在ie 下有同步方面的问题。
所以，我用了 onreadystatechange 。 代码和 使用方法如下：
function SImage(callback)
{
var img = new Image();
this.img = img;
var appname = navigator.appName.toLowerCase();
if (appname.indexOf("netscape") == -1)
{
//ie
img.onreadystatechange = function () {
if (img.readyState == "complete")
{
callback(img);
}
};
} else {
//firefox
img.onload = function () {
if (img.complete == true)
{
callback(img);
}
}
}
}
SImage.prototype.get = function (url)
{
this.img.src = url;
}
var img = new SImage(icall);
img.get("http://space.cnblogs.com/images/logo.gif");
function icall(obj)
{
alert(obj.width);
}
</script>
普通分类: