html无法获取图片高宽,如何解决谷歌浏览器下jquery无法获取图片的尺寸
代码如下:
$(document).ready(function(){
var img_h=$img.height();
var img_w=$img.width();
})
以上代码在IE和火狐中没有问题,但是在谷歌中可能会出现问题,之所以没货的尺寸就是因为图片没有加载完成。
修改方法如下:
$(document).ready(function(){
$img.load(function(){
var img_h=$img.height();
var img_w=$img.width();
})
})
还有点时间,接下来在给大家分享jQuery动态改变图片显示大小的方法,具体内容如下。
当我们要显示后台传过来若干个尺寸不一的图片时,为了保证图片大小的一致性及比例的协调,需要动态改变图片显示尺寸。通过搜索,我们可以从网上找到实现此功能的jQuery代码如下。这段代码可以使图片的大小保持在一定范围内,如果图片的原始尺寸都大于max*值,则显示出来的图片宽度都相等。
原始代码:
$(document).ready(function() {
$('.post img').each(function() {
var maxWidth = 100; // 图片最大宽度
var maxHeight = 100; // 图片最大高度
var ratio = 0; // 缩放比例
var width = $(this).width(); // 图片实际宽度
var height = $(this).height(); // 图片实际高度
// 检查图片是否超宽
if(width > maxWidth){
ratio = maxWidth / width; // 计算缩放比例
$(this).css("width", maxWidth); // 设定实际显示宽度
height = height * ratio; // 计算等比例缩放后的高度
$(this).css("height", height); // 设定等比例缩放后的高度
}
// 检查图片是否超高
if(height > maxHeight){
ratio = maxHeight / height; // 计算缩放比例
$(this).css("height", maxHeight); // 设定实际显示高度
width = width * ratio; // 计算等比例缩放后的高度
$(this).css("width", width * ratio); // 设定等比例缩放后的高度
}
});
});
在我的js代码中,也采取了这种写法。然而在不同的浏览器测试效果时,发现此种写法不能适应chrome浏览器(chrome版本号为10.0.648.204),会产生图片以原有尺寸显示出来的bug。后来把$('.post img').each()的代码用$(window).load()方法包装起来,就解决了chrome浏览器显示不正确的问题。那么在chrome浏览器中为什么会产生bug,并且$(document).ready和$(window).load有什么区别呢?
原来document ready事件是在HTML文档载入即DOM准备好就开始执行了,即使图片资源还没有加载进来。而window load事件执行的稍晚一些,它是在整个页面包括frames, objects和images都加载完成后才开始执行的。从这种区别可以分析出chrome浏览器在对于图片不采用$(window).load()方法处理时,图片载入与动态改变图片的js代码执行顺序不确定。
----------------------------------------------------
上面是文章的全部类容,关于上面的代码,放到我的页面中时获取图片高度时会报错,提示没有提供width方法
var width = $(this).width(); // 图片实际宽度
var height = $(this).height(); // 图片实际高度
故修改代码如下:
jQuery(window).load(function () {
jQuery("div.product_info img").each(function () {
DrawImage(this, 680, 1000);
});
});
function DrawImage(ImgD, FitWidth, FitHeight) {
var image = new Image();
image.src = ImgD.src;
if (image.width > 0 && image.height > 0) {
if (image.width / image.height >= FitWidth / FitHeight) {
if (image.width > FitWidth) {
ImgD.width = FitWidth;
ImgD.height = (image.height * FitWidth) / image.width;
} else {
ImgD.width = image.width;
ImgD.height = image.height;
}
} else {
if (image.height > FitHeight) {
ImgD.height = FitHeight;
ImgD.width = (image.width * FitHeight) / image.height;
} else {
ImgD.width = image.width;
ImgD.height = image.height;
}
}
}
}
以上内容是本人给大家分享的如何解决谷歌浏览器下jquery无法获取图片的尺寸以及jQuery动态改变图片显示大小的方法,希望大家喜欢,更希望朋友请持续关注本站,谢谢。
本条技术文章来源于互联网,如果无意侵犯您的权益请点击此处反馈版权投诉
本文系统来源:php中文网
html无法获取图片高宽,如何解决谷歌浏览器下jquery无法获取图片的尺寸相关推荐
- electronjs设置宽度_Js操作DOM元素及获取浏览器高宽的简单方法
在JavaScript中,经常会来获取Document文档元素,是 HTML 文档对象模型的英文缩写,Document Object Model for HTML,是基于浏览器编程,HTML DOM ...
- 解决IE9下JQuery的ajax失效的问题
解决IE9下JQuery的ajax失效的问题 参考文章: (1)解决IE9下JQuery的ajax失效的问题 (2)https://www.cnblogs.com/cxf520/p/5777119.h ...
- MFC获取文字高宽设置字符间隔
SIZE sizeText={0};//字体高宽 ::GetTextExtentPoint32(hDC, lpStr/*字符串*/, strLen/*字符串的长度*/, &sizeText); ...
- 解决IE8下父容器背景图片不显示的问题
我们发现在IE8下不能显示背景图片的原因是因为子容器使用了float浮动而没有真正闭合,这也是div无法自适应高度的一个原因.如果父div没有设float而其子div却设了float的话,父div无法 ...
- 解决IE下jquery ajax无法获得最新数据的问题(IE缓存)
今天修改一个bug,利用ajax查询数据,在谷歌浏览器下可以获取到最新数据,而在IE中获得是旧数据,无法获得最新的数据,经查资料,才发现时IE缓存再作怪. 发现此ajax请求用的get方式,每次请求的 ...
- angular获取图片高宽_Angular 读书笔记
前言 今天是二月份的最后一天,是该好好总结下.2月12号正式开始工作,第一周有些不在状态,所以18号-28号真正投入工作和学习,最近工作节奏不是特别快(两周的polish week 修复bug),但是 ...
- CTF 图片隐写之修改图片高宽
CTF WriteUp ...
- css限制图片高宽,CSS限定图片宽高在范围内等比缩放(img缺省宽高属性)
this.p={ m:2, b:2, loftPermalink:'', id:'fks_0870650860840870700840950850640720870830750840840850660 ...
- js 获取屏幕高宽_JS获取屏幕的宽高。
function a(){ document.write( "屏幕分辨率为:"+screen.width+"*"+screen.height +" & ...
最新文章
- ASP.NET CORE之上传文件夹
- linux常用命令之lsof 、netstat、ipcs、ldd
- python代码运行不了怎么办_selenium ide 生成的 Python 代码无法执行是怎么回事?
- 危害网络安全或入信用“黑名单”
- jmeter.bat配置(主要关于OOM)
- 被嫌弃的eval和with
- 【POJ - 3159】Candies (差分约束,卡SPFA)
- C语言挂载文件夹,使用autofs 按需挂载共享目录
- 命令行运行Jmeter实例
- 【Win 10应用开发】Adaptive磁贴模板的XML文档结构
- 爬虫cookie过期_【Python】Scrapy爬虫框架之Request和Response
- 【渝粤教育】国家开放大学2018年秋季 0692-21T化工设备机械基础 参考试题
- QT之tableWidget删除全部行
- excel计算式自动计算_全套Excel版工程自动计算表格+实用小工具,高效工作不加班...
- 华为网络安全工程师:HCNA-Security(H12-711)题型解析(第二部分)-马青-专题视频课程...
- matplotlib-27 内嵌环形饼图
- NXP JN5169滴答定时器中断回调函数
- 企业发文的红头文件_实例分享:怎样制作双发文单位红头文件,文件二字与发文单位并排...
- 计算机专业大专考研考什么科目,计算机专业考研都考什么科目?
- usertoken_华为手机usertoken已过期
热门文章
- 搜狗输入法中文状态下开启和关闭英文自动提示
- 编写一个程序,使用for循环打印由 * 号构成的实心棱形和空心棱形
- 人工智能:为什么很多机器学习和深度学习的论文复现不了?
- ORA-03135: Connection Lost Contact 数据库丢失联系
- 人为什么要学数学 ——数学意义的哲学思考
- python操作ppt
- tesla p100 linux,服务器(Tesla P100)Ubuntu16.04+显卡驱动+cuda8.0+cudnn7.0.5
- 恒星结构和演化-学习记录6-第五章-恒星核合成
- @value值获取不到配置文件值
- 信捷伺服刚性调整_信捷伺服常见问题分析解答.pdf