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

问题描述:

    我想获取一个容器元素的高度(包含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

阅读更多
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页