一、简陋的获取图片方式
| 代码如下 | 复制代码 |
|
// 图片地址 后面加时间戳是为了避免缓存 var img_url = '/13643608813441.jpg?'+Date.parse(new Date()); // 创建对象 var img = new Image(); // 改变图片的src img.src = img_url; // 打印 alert('width:'+img.width+',height:'+img.height); |
|
执行：
宽高都是0的这个结果很正常，因为图片的相关数据都没有被加载前它的宽高默认就是0
于是可以这么优化！
二、onload后在打印
| 代码如下 | 复制代码 |
| // 图片地址 后面加时间戳是为了避免缓存 var img_url = '/13643608813441.jpg?'+Date.parse(new Date()); // 创建对象 var img = new Image(); // 改变图片的src img.src = img_url; // 加载完成执行 img.onload = function(){ // 打印 alert('width:'+img.width+',height:'+img.height); }; |
|
执行：
通过onload就能获取到图片的宽高了。但onload大一点的图通常都比较慢，不实用，但只要图片被浏览器缓存，那么图片加载几乎就不用等待即可触发onload，我们要的是占位符。所以有些人通过缓存获取也可以这么写。
三、通过complete与onload一起混合使用
为了测试缓存效果，注意以下测试图片的url都不加时间戳
| 代码如下 | 复制代码 |
|
// 图片地址 var img_url = '/13643608813441.jpg'; // 创建对象 var img = new Image(); // 改变图片的src img.src = img_url; // 判断是否有缓存 if(img.complete){ // 打印 alert('from:complete : width:'+img.width+',height:'+img.height); }else{ // 加载完成执行 img.onload = function(){ // 打印 alert('from:onload : width:'+img.width+',height:'+img.height); }; } |
|
jquery方式获取
前提是图片路径是正确的...
| 代码如下 | 复制代码 |
|
var img = new Image(); img.src=https://yunqi-tech.oss-cn-hangzhou.aliyuncs.com/baidu_sylogo1.gif; img.onload = function(){ alert(this.width); alert(this.height); this.onload=null; } |
|
通过$("#img").attr("width");这种方式获取的值,有时候是不正确的
jquery还有另一种办法
| 代码如下 | 复制代码 |
|
var pic_real_width, pic_real_height; $("<img/>") // Make in memory copy of image to avoid css issues .attr("src", $(img).attr("src")) .load(function() { pic_real_width = this.width; // Note: $(this).width() will not pic_real_height = this.height; // work for in memory images. }); |
|
看一个等比例缩放
| 代码如下 | 复制代码 |
|
<script type="text/javascript"> function changeImg(objImg) { var most = 690; //设置最大宽度 if(objImg.width > most) { var scaling = 1-(objImg.width-most)/objImg.width; //计算缩小比例 objImg.width = objImg.width*scaling; objImg.height = objImg.height; //img元素没有设置高度时将自动等比例缩小 //objImg.height = objImg.height*scaling; //img元素设置高度时需进行等比例缩小 } } </script> HTML调用部分 <img src="" onload="changeImg(this);" /> |
|
时间： 2024-09-23 19:26:05