问题描述：

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

Logo
向您推荐>>Eolink开发者社区

权威｜前沿｜技术｜干货｜国内首个API全生命周期开发者社区

更多推荐

ELK实现containerd的容器日志采集展示【基于logging的全栈监测】

企业级ELK Stack构建介绍

avatar 云原生

深入理解 Mocha 测试框架：从零实现一个 Mocha

前言什么是自动化测试自动化测试在很多团队中都是Devops环节中很难执行起来的一个环节，主要原因在于测试代码的编写工作很难抽象，99%的场景都需要和业务强绑定，而且写测试代码的编写工作量往往比编写实际业务代码的工作量更多。在一些很多业务场景中投入产出比很低，适合写自动化测试的应该是那些中长期业务以及一些诸如组件一样的基础库。自动化测试是个比较大的概念，其中分类也比较多，比如单元测试，端对端测试，集

avatar 云原生

(20200916 Solved)docker-compose up创建容器自动退出

问题描述如题，创建容器后自动退出了。并且docker start container无效解决方案原因是缺失了控制终端的配置，需要在docker-compose.yml中增加tty:true ，有时候这样也不行，需要再增加一个command:/bin/bash，命令不一定是这个，需要是一个不会退出的命令，然后用-d后台启动容器。Referencesdocker-compose启动容器后自动退出...

avatar 云原生