js和jquery如何获取图片真实的宽度和高度


Posted in Javascript onSeptember 28, 2014

1、什么时候需要获取图片真实的宽度和高度

在做pc网页的时候,有时候会考虑按照插入的图片的尺寸来判断图片是横图还是竖图。然后判断过后给予不同的展示方式!

另外一种就是在手机页面上,在新闻页插入的图片往往都是按照图片的原尺寸来展示,如果手机屏幕太小,太大的图就会超出去!这时候有两种解决办法

1)给所有的图片加上这样的样式

1

.news img{margin:5px auto; display:block;width:100%; height:auto;}

但是这种方式有另外一个问题就是,如果插入的图片本身就很小的话,也会被直接拉伸成100%显示,显然这是不合理的!那么这里就介绍另外一种方式就是通过js动态展示图片的尺寸!

2)js动态获取图片的尺寸

jquery方式

代码如下

var _w = parseInt($(window).width());//获取浏览器的宽度
$(".new_mess_c img").each(function(i){
var img = $(this);
var realWidth;//真实的宽度
var realHeight;//真实的高度
//这里做下说明,$("<img/>")这里是创建一个临时的img标签,类似js创建一个new Image()对象!
$("<img/>").attr("src", $(img).attr("src")).load(function() {
/*
如果要获取图片的真实的宽度和高度有三点必须注意
1、需要创建一个image对象:如这里的$("<img/>")
2、指定图片的src路径
3、一定要在图片加载完成后执行如.load()函数里执行
*/
realWidth = this.width;
realHeight = this.height;
//如果真实的宽度大于浏览器的宽度就按照100%显示
if(realWidth>=_w){
$(img).css("width","100%").css("height","auto");
}
else{//如果小于浏览器的宽度按照原尺寸显示
$(img).css("width",realWidth+'px').css("height",realHeight+'px');
}
});
});

js方式

代码如下

window.onload = function(){
function getViewSize() {//获取浏览器视口的宽高
return {
"w": window['innerWidth'] || document.documentElement.clientWidth,
(3water.com) "h": window['innerHeight'] || document.documentElement.clientHeight
}
}
function getFullSize() {//获取浏览器最大的宽度
var w = Math.max(document.documentElement.clientWidth, document.body.clientWidth) +
Math.max(document.documentElement.scrollLeft, document.body.scrollLeft);
var h = Math.max(document.documentElement.clientHeight, document.body.clientHeight) +
Math.max(document.documentElement.scrollTop, document.body.scrollTop);
w = Math.max(document.documentElement.scrollWidth, w);
h = Math.max(document.documentElement.scrollHeight, h);
return {
"w": w,
"h": h
};
}
var _sv_w = getViewSize()["w"];
var _sf_w = getFullSize()["w"];
var _w = _sv_w;//这里用视口的宽度,具体视情况
var Imgarray = document.getElementsByTagName("img");
var realWidth;//真实的宽度
var realHeight;//真实的高度
for(var i =0;i<Imgarray.length;i++){
var imgtemp = new Image();//创建一个image对象
imgtemp.src = Imgarray[i].src;
imgtemp.index = i;//指定一个检索值,用于确定是哪张图
imgtemp.onload = function(){//图片加载完成后执行
var _stemp = this;//将当前指针复制给新的变量,不然会导致变量共用
realWidth = this.width;
realHeight = this.height;
if(realWidth >=_w )
{
Imgarray[_stemp.index].style.width = _w+'px';
Imgarray[_stemp.index].style.height = 'auto';
}
else{
Imgarray[_stemp.index].style.width = realWidth+'px';
Imgarray[_stemp.index].style.height = realHeight+'px';
}
}
}
}

上面两种方法中jquery比较简单,实现起来比较快,第二种比较复杂些,但是执行起来比jquery要快!

Javascript 相关文章推荐
解析使用js判断只能输入数字、字母等验证的方法(总结)
May 14 Javascript
深入理解javascript中return的作用
Dec 30 Javascript
php读取sqlite数据库入门实例代码
Jun 25 Javascript
常见的javascript跨域通信方法
Dec 31 Javascript
Angular 页面跳转时传参问题
Aug 01 Javascript
深入理解Angularjs向指令传递数据双向绑定机制
Dec 31 Javascript
详解前端构建工具gulpjs的使用介绍及技巧
Jan 19 Javascript
ES6学习教程之对象字面量详解
Oct 09 Javascript
小程序input数据双向绑定实现方法
Oct 17 Javascript
微信小程序 SOTER 生物认证DEMO 指纹识别功能
Dec 13 Javascript
用VsCode编辑TypeScript的实现方法
May 07 Javascript
vue radio单选框,获取当前项(每一项)的value值操作
Sep 10 Javascript
一个jquery实现的不错的多行文字图片滚动效果
Sep 28 #Javascript
IE中getElementsByName()对有些元素无效的解决方案
Sep 28 #Javascript
js propertychange和oninput事件
Sep 28 #Javascript
javascript检测是否联网的实现代码
Sep 28 #Javascript
javascript检测浏览器的缩放状态实现代码
Sep 28 #Javascript
Node.js中使用mongoskin操作mongoDB实例
Sep 28 #Javascript
js使用for循环与innerHTML获取选中tr下td值
Sep 26 #Javascript
You might like
php URL编码解码函数代码
2009/03/10 PHP
php ckeditor上传图片文件名乱码解决方法
2013/11/15 PHP
PHP多线程之内部多线程实例分析
2015/03/09 PHP
Yii2-GridView 中让关联字段带搜索和排序功能示例
2017/01/21 PHP
php单元测试phpunit入门实例教程
2017/11/17 PHP
JQuery 无废话系列教程(一) jquery入门 [推荐]
2009/06/23 Javascript
几个有趣的Javascript Hack
2010/07/24 Javascript
javascript中验证大写字母、数字和中文
2014/01/15 Javascript
JS去掉第一个字符和最后一个字符的实现代码
2014/02/20 Javascript
100个不能错过的实用JS自定义函数
2014/03/05 Javascript
Nodejs学习笔记之测试驱动
2015/04/16 NodeJs
JavaScript中的some()方法使用详解
2015/06/09 Javascript
BootStrap Table 分页后重新搜索问题的解决办法
2016/08/08 Javascript
jQuery层次选择器用法示例
2016/09/09 Javascript
详解Angularjs 如何自定义Img的ng-load 事件
2017/02/15 Javascript
Vue项目环境搭建详细总结
2019/09/26 Javascript
js实现右键弹出自定义菜单
2020/09/08 Javascript
跟老齐学Python之Python安装
2014/09/12 Python
Python使用urllib2模块抓取HTML页面资源的实例分享
2016/05/03 Python
python去除空格和换行符的实现方法(推荐)
2017/01/04 Python
Python多线程经典问题之乘客做公交车算法实例
2017/03/22 Python
Python实用库 PrettyTable 学习笔记
2019/08/06 Python
更新升级python和pip版本后不生效的问题解决
2020/04/17 Python
在python里使用await关键字来等另外一个协程的实例
2020/05/04 Python
python不到50行代码完成了多张excel合并的实现示例
2020/05/28 Python
英国定做窗帘和纺织品面料一站式商店:Dekoria
2018/08/29 全球购物
辞职信如何写
2015/02/27 职场文书
2015年前台个人工作总结
2015/04/03 职场文书
2016教师廉洁从教心得体会
2016/01/13 职场文书
调研报告的主要写法
2019/04/18 职场文书
Laravel中获取IP的真实地理位置
2021/04/01 PHP
Windows 11上手初体验:任务栏和开始菜单等迎来大改
2021/11/21 数码科技
交互式可视化js库gojs使用介绍及技巧
2022/02/18 Javascript
Python中re模块的元字符使用小结
2022/04/07 Python
redis 解决库存并发问题实现数量控制
2022/04/08 Redis
MySQL 表锁定 LOCK和UNLOCK TABLES的 SQL语法
2022/04/18 MySQL