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 相关文章推荐
web页面数据展示新想法(json)
Jun 08 Javascript
jQuery焦点图切换特效代码分享
Sep 15 Javascript
js实现遍历含有input的table实例
Dec 07 Javascript
深入解析JavaScript框架Backbone.js中的事件机制
Feb 14 Javascript
jquery.Callbacks的实现详解
Nov 30 Javascript
解析JavaScript模仿块级作用域
Dec 29 Javascript
详解JavaScript调用栈、尾递归和手动优化
Jun 03 Javascript
Vue点击切换颜色的方法
Sep 13 Javascript
小程序自定义单页面、全局导航栏的实现代码
Mar 15 Javascript
重学 JS:为啥 await 不能用在 forEach 中详解
Apr 15 Javascript
函数式编程入门实践(一)
Apr 20 Javascript
微信小程序picker组件两列关联使用方式
Oct 27 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与ASP
2006/10/09 PHP
Banner程序
2006/10/09 PHP
经常用到的JavasScript事件的翻译
2007/04/09 Javascript
JavaScript语法着色引擎(demo及打包文件下载)
2007/06/13 Javascript
从JavaScript 到 JQuery (1)学习小结
2009/02/12 Javascript
JavaScript中的类继承
2010/11/25 Javascript
Jquery阻止事件冒泡 event.stopPropagation
2011/12/11 Javascript
JavaScript高级程序设计(第3版)学习笔记11 内建js对象
2012/10/11 Javascript
jQuery实现侧浮窗与中浮窗切换效果的方法
2016/09/05 Javascript
深入了解JavaScript的逻辑运算符(与、或)
2016/12/20 Javascript
jQuery操作复选框(CheckBox)的取值赋值实现代码
2017/01/10 Javascript
require.js中的define函数详解
2017/07/10 Javascript
Vue.js学习笔记之常用模板语法详解
2017/07/25 Javascript
微信小程序radio组件使用详解
2018/01/31 Javascript
详解微信小程序canvas圆角矩形的绘制的方法
2018/08/22 Javascript
微信小程序日历/日期选择插件使用方法详解
2018/12/28 Javascript
Node.js HTTP服务器中的文件、图片上传的方法
2019/09/23 Javascript
[14:19]2018年度COSER大赛-完美盛典
2018/12/16 DOTA
[32:36]完美世界DOTA2联赛PWL S3 LBZS vs CPG 第二场 12.12
2020/12/16 DOTA
Python3中详解fabfile的编写
2018/06/24 Python
python交换两个变量的值方法
2019/01/12 Python
Python企业编码生成系统总体系统设计概述
2019/07/26 Python
用python爬取历史天气数据的方法示例
2019/12/30 Python
Python super()函数使用及多重继承
2020/05/06 Python
Python 实现将numpy中的nan和inf,nan替换成对应的均值
2020/06/08 Python
python根据用户需求输入想爬取的内容及页数爬取图片方法详解
2020/08/03 Python
通过实例简单了解python yield使用方法
2020/08/06 Python
Python爬虫破解登陆哔哩哔哩的方法
2020/11/17 Python
火山咖啡:Volcanica Coffee
2019/10/29 全球购物
实习单位鉴定评语
2014/04/26 职场文书
国际经济与贸易专业求职信
2014/07/10 职场文书
工会工作先进事迹
2014/08/18 职场文书
晚会开幕词
2015/01/28 职场文书
2015年财务人员工作总结
2015/04/10 职场文书
Matplotlib可视化之添加让统计图变得简单易懂的注释
2021/06/11 Python
Java新手教程之ArrayList的基本使用
2021/06/20 Java/Android