jquery-outerHeight(true)的值有误问题解决办法(chrome浏览器)

11人阅读 评论(0) 收藏 举报
问题描述:

    我想获取一个容器元素的高度(包含margin+padding+height+border),容器中包含图片,当我在chrome浏览器中调试移动到容器元素上的时候,我通过Jquery中 $('element').outerHeight(true) 所获取到的值并不是我想要的值,而是比我想要获取到的值更小。 这个容器元素的样式中包含容器本身的宽度width,position:relative和子元素里position:absolute在火狐浏览器(FireFox)中,jquey的outerHeight(true)的方法可以获取到盒子容器的高度(margin+border+padding+height);但是在chrome浏览器中却怎么也获取不到正确的值。

原因:

     如果容器中包含有图片元素,如果图片元素没有能够及时的加载完成,这个时候,计算的outerHeight(true)的值就会不包含图片的值,所以获取的到值会比你需要的值小。

解决办法:

    先判断图片加载完成,然后再计算容器的outerHeight(true)的值。

判断图片加载完成的方法:

JavaScript方法判断单个元素:

通过指定图片元素的onload方法,判断图片是否加载完成:

<img src="images/1.jpg" id="img" alt=""/>
<script>
    document.getElementById("img").onload=function(){
    console.log('图片加载完成!');
}
</script>

所有浏览器都显示出了“loaded”,说明所有浏览器都支持img的load事件。

通过readystatechange事件判断图片是否加载完成:

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>img - readystatechange event</title>
</head>
<body>
    <img id="img1"src="http://pic1.win4000.com/wallpaper/f/51c3bb99a21ea.jpg">
    <p id="p1">loading...</p>
    <script type="text/javascript">
        img1.onreadystatechange =function() {
            if(img1.readyState=="complete"||img1.readyState=="loaded"){
                p1.innerHTML ='readystatechange:loaded'
            }
        }
    </script>
</body>
</html>

readyState为complete和loaded则表明图片已经加载完毕。测试IE6-IE10支持该事件,其它浏览器不支持。

通过complete判难图片是否加载完成:

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>img - complete attribute</title>
</head>
<body>
    <img id="img1"src="http://pic1.win4000.com/wallpaper/f/51c3bb99a21ea.jpg">
    <p id="p1">loading...</p>
    <script type="text/javascript">
        functionimgLoad(img, callback) {
            vartimer = setInterval(function() {
                if(img.complete) {
                    callback(img)
                    clearInterval(timer)
                }
            }, 50)
        }
        imgLoad(img1,function() {
            p1.innerHTML('加载完毕')
        })
    </script>
</body>
</html>

轮询不断监测img的complete属性,如果为true则表明图片已经加载完毕,停止轮询。该属性所有浏览器都支持。

Jquery方法判断多个img全部完成加载:

<script type="text/javascript">
    $(function(){
	$('.pic1').each(function() {
	        $(this).load(function(){
		    $(this).fadeIn();
	        });
        });
    });
</script>

注意,不要在$(document).ready()里绑定load事件。

这样判断图片加载完成后,在通过jquery 的outerHeight(true),就可以获取整个容器元素的高度啦



内容参考:https://stackoverflow.com/questions/10268892/outerheighttrue-gives-wrong-value

                https://blog.csdn.net/zhuchunyan_aijia/article/details/52016962

查看评论

chrome浏览器不能显示本地图片办法解决(图片预览)

近期开发项目时有个功能是实现图片预览,但是我将图片路径赋值给img标签的src时,预览的显示是这样的。 唉。我就郁闷了,再仔细一看,浏览器给我加了个路径啊。 这是什么鬼东西啊。 试了一下repl...
  • JudyC
  • JudyC
  • 2017-05-19 14:39:49
  • 313

chrome浏览器“白板”问题的解决办法

最近安装chrome浏览器,经常出现一个现象,链接明明打开了,但chrome显示为一片白,什么也没有,正是那句话“白茫茫一片大地真干净”。     找了很久,才找到答案,解决办法是:在地址栏输入chr...
  • lujisheng
  • lujisheng
  • 2013-04-01 17:07:28
  • 1705

浮动元素引起的问题和解决方法

浮动元素引起的问题1.由于浮动元素已脱离文档流,所以父元素无法被撑开,影响与父级元素同级的元素。 2.与浮动元素同级的非浮动元素(内联元素)会跟随其后,也是由于浮动元素脱离文档流,不占据文档流中额位...
  • qq_27263045
  • qq_27263045
  • 2017-08-14 15:07:44
  • 623

chrome浏览器里 console.log 一个object 结果有问题

var test = {}; for(var i in test) alert(i); console.log(test); test.a = 'a'; test.b = 'b'; test.c = ...
  • liu510817387
  • liu510817387
  • 2013-01-09 02:10:58
  • 2692

Jenkins ProcessTreeKiller 问题。

java -Dhudson.util.ProcessTree.disable=true -jar jenkins.war Jenkins Execute Shell: #!/bin...
  • hknaruto
  • hknaruto
  • 2016-04-06 18:54:42
  • 691

jquery.validate插件remote规则相同值不验证的问题解决办法

  • 2013年04月02日 17:08
  • 187B
  • 下载

EDECMS提示信息修改

这个资料是看别人的,但是有些说的不明白,我给大家介绍修改的更明白一些,适合菜鸟使用。   织梦内容管理系统(DedeCMS),是一个集内容发布、编辑、管理检索等于一体的网站管理系统(Web CMS)...
  • tx3le076
  • tx3le076
  • 2014-07-08 14:45:02
  • 343

Chrome浏览器常见问题及解决方案集锦

Chrome是一款非常优秀的浏览器,尤其在网页调试方面出类拔萃,深得本人的喜欢。但是在使用的过程中,总有一些问题会困扰大家,现将一些常见问题及解决方案列举出来,供参考。 1. Chrome下遇到该网页...
  • lucky51222
  • lucky51222
  • 2017-05-31 11:01:08
  • 1550

SQL2000安装挂起问题解决办法

  • 2018年02月26日 11:17
  • 125B
  • 下载

ORA-01092问题的解决

问题描述: 在用startup启动数据库时,遇到ora-1092错误 解决方案: (1)首先需要明确,我们当前对数据库的操作,在数据库中是有记录的,那么当前我们的startup相关操作日志会记录...
  • xuelun_yan
  • xuelun_yan
  • 2013-05-24 20:24:52
  • 653
    个人资料
    等级:
    访问量: 456
    积分: 101
    排名: 125万+
    文章分类
    文章存档