预期输出

Question

加载HTML文档后发生ready事件，而所有内容（例如图片，css）也已加载后，window.onload事件发生。

在下面的代码中，

<script> jQuery(window).load(function(){ jQuery('#div1').html("Height= " + jQuery('#img1').height() + "<br>" + "width= " + jQuery('#img1').width()); }); </script>

<body> <div id="div1"></div> <img id="img1" src="MammalConstructor.png"> </body>

预期输出

实际输出

所以，

1）

为什么在加载window.onload之前发生img事件？

2）

等效的javascript代码是什么，

jQuery('#div1').html("Height= " + jQuery('#img1').height() + "<br>" + "width= " + jQuery('#img1').width());？

Answer 1

你正在尝试扩展Div，以便它与图像的大小相同？我从链接中看到它的某种教程...我认为你已经完成了这个

1-你可以在div中包含图像

2-如果您无法访问html，可以将图像附加到div中 ....

第一点使用window.onload而非load

阅读此内容以获取更多信息 window.onload vs $(document).ready()

关于你的第二点

jQuery('#div1').html("Height= " + jQuery('#img1').height() + "<br>" + "width= " + jQuery('#img1').width());? 转换为JS是一项艰苦的工作我可以推荐你这篇文章有很多工具可以将JQ转换为JS

Is there an easy way to convert jquery code to javascript?

Answer 2

对于第一个问题为什么在加载img之前发生window.load事件？：

没有。根据您的输出屏幕截图，您明确了.height()和.width()方法的值。这意味着图像已加载，或者图像的高度/宽度由CSS设置。

对于第二个问题，在 vanilla javascript 中，可以写成

document.querySelector('#div1').innerHTML = "Height= " +
  parseFloat(getComputedStyle(document.querySelector('#img1')).height) + "<br>" +
  "width= " + parseFloat(getComputedStyle(document.querySelector('#img1')).width);

正如您在jquery的文档width()和height()方法中看到的那样，两者都返回“当前计算的”宽度/高度。

因此，如果您的图片尚未加载，则这些方法会返回24，这是默认not found图标或0的大小。

var before = "before load height= " + jQuery('#img1').height() + "<br>" + "before load width= " + jQuery('#img1').width()+"<br>";

jQuery(window).load(function() {
  jQuery('#div1').html(before + "on load height= " + jQuery('#img1').height() + "<br>" + "on load width= " + jQuery('#img1').width());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1"></div>
<img id="img1" src="http://lorempixel.com/200/200">

现在，我的猜测是你想知道为什么文本写在图像上，当你在图片加载后要求javascript写它时。

然后答案就是您正在写入放置在html中<div id="div1"></div>标记之前的<img>。如果你告诉浏览器将一个元素作为第一个节点，_{（如果你只使用默认的CSS）}那么执行时间js对于如何呈现内容并不重要，那么它将是在页面顶部。

为什么在加载img之前会发生window.load事件？

预期输出

实际输出

2 个答案: