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

最新推荐文章于 2024-04-16 10:44:58 发布

想要成为编码机器人

最新推荐文章于 2024-04-16 10:44:58 发布

阅读量1.8k

点赞数

本文链接：https://blog.csdn.net/Jasmines1993/article/details/79978029

版权

问题描述：

我想获取一个容器元素的高度（包含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").οnlοad=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

想要成为编码机器人

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery-outerHeight(true)的值有误问题解决办法（chrome浏览器）

问题描述：我想获取一个容器元素的高度（包含margin+padding+height+border），容器中包含图片，当我在chrome浏览器中调试移动到容器元素上的时候，我通过Jquery中 $('element').outerHeight(true) 所获取到的值并不是我想要的值，而是比我想要获取到的值更小。这个容器元素的样式中包含容器本身的宽度width,position:rela...
复制链接

扫一扫