Chrome和Safari浏览器jquery width()获取不到高度的问题

转载 2013年12月04日 12:47:54

问题概要 :

偶要遍历一组图片,遍历时需要获取其宽度,效果出来后,IE和Firefox都没有问题,唯独Chrome和Safari会出现获取不到图片宽度的情况。以往基本上是IE不兼容,这下出现Chrome和Safari不兼容了,倒觉得稀奇了,故写出来分享下。

注:代码修改之前,直接用的$(ele).width()来取图片的宽度。涉及代码:

  1. $(function(){
  2. ... //此处省略N行
  3. var w = $(this).width();
  4. ... //此处省略N行
  5. });

分析后得知,Chrome和Safari肯定是图片还没有完全载入进来,就去获取图片的宽度了,得其宽度为0,肯定就出错了

解决办法:

一、不要使用”$(document.ready(function(){…})”或其简写形式”$(function(){…}),使用$(window).load(function(){}); 代码改写如下:

  1. $(window).load(function(){
  2. ... //此处省略N行
  3. var w = $(this).width();
  4. ... //此处省略N行
  5. });
  1.  

二、使用Image对象和其onload方法

  1. $(function(){
  2. ... //此处省略N行
  3. var that = $(this);
  4. var img = new Image();
  5. img.src = $(this).attr("src");
  6. img.onload = function(){
  7. var w = img.width;
  8. }
  9. ... //此处省略N行
  10. });

最后啰嗦下,获取高度,用$(ele).height()在Chrome和Safari下也会出现此问题。





出处:

Javascript、Jquery获取浏览器和屏幕各种高度宽度

Javascript: alert(document.body.clientWidth);        //网页可见区域宽(body) alert(document.body.clientHei...
  • u013909970
  • u013909970
  • 2015年07月29日 09:20
  • 411

IE、Safari、Chrome浏览器JavaScript兼容性改造总结 .

1.1 浏览器内核差别 1.2. Safari和Chrome浏览器简介 Safari和Chrome,一个是苹果公司MAC OS系统的浏览器,一个是Google开发的浏览器,它们都使用了同样的内核w...
  • zhejingyuan
  • zhejingyuan
  • 2013年06月27日 13:14
  • 12337

js代码判断浏览器种类IE、FF、Opera、Safari、chrome及版本

因为ie10-ie11的版本问题,不再支持document.all判断,所以ie判断函数要重新写了 1 2 3 4 5 6 function isIE() { //ie?     ...
  • catherine_sue
  • catherine_sue
  • 2017年03月13日 19:11
  • 693

[jQuery]无法准确获取隐藏元素(display:none)宽度(width)和高度(height)的新解决方案

在开发一个弹框插件时,遇到一个需要计算隐藏弹框的高度问题。用jquery里面的方法$('box').outerHeight(true)得到隐藏层高度的值随着滚动条滚动总是不一致。没辙,放弃这一方法去获...
  • huang100qi
  • huang100qi
  • 2016年10月18日 11:20
  • 3079

js/jquery获取浏览器窗口可视区域高度和宽度以及滚动条高度

获取浏览器窗口的可视区域高度和宽度,滚动条高度有需要的朋友可参考一下。 IE中,浏览器显示窗口大小只能以下获取: 代码如下: document.body.offsetWidth; document.b...
  • u014395524
  • u014395524
  • 2015年10月22日 17:20
  • 3083

获取scrollTop兼容各浏览器的方法,以及绑定

$(window).unbind('scroll').bind('scroll', function () { var scrollTop = document.documentElement.sc...
  • u010423904
  • u010423904
  • 2016年07月13日 19:39
  • 811

safari浏览器实现模拟click点击事件

在项目中经常会用到onclick点击事件触发效果,如给button按钮添加一个点击事件:点我 var btn = document.getElementById("btn"); bt...
  • chenxueshanBlog
  • chenxueshanBlog
  • 2017年01月19日 09:22
  • 1940

不同浏览器获取DOM元素的各种高度

HTML中高度和宽度的获取,跨浏览器兼容性,以及jQuery中操作
  • l522703297
  • l522703297
  • 2016年02月28日 03:47
  • 4981

利用jQuery srollTop()函数实现类似锚点的定位效果-兼容chrome,firefox,IE,safari

如题。          在网页开发的过程中,锚点可以实现页面快速定位。          《1》          常见的情况,是同一个页面内导航和锚点的配合,但是跳转时是直接切换,效果生硬。   ...
  • killzero
  • killzero
  • 2013年12月20日 18:23
  • 3917

Safari浏览器inline-block水平对齐问题

自用项目开始做移动端的响应式布局,本以为可以终于抛弃IE愉快的玩耍了,谁知道还是有许多坑_(:зゝ∠)_首先安利下chrome的开发者工具,真的很好用,如下图:可以很方便的选择显示尺寸,各种常用手机屏...
  • u012939070
  • u012939070
  • 2016年02月25日 12:24
  • 401
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Chrome和Safari浏览器jquery width()获取不到高度的问题
举报原因:
原因补充:

(最多只允许输入30个字)