JQuery 图像大小为零答案

【问题标题】：JQuery image size zeroJQuery 图像大小为零
【发布时间】：2018-03-29 13:30:04
【问题描述】：

我制作了一个小插件，使用naturalHeight 和naturalWidth 获取大小

有时在加载页面时，我的宽度和高度为 0（其他时候效果很好）。我猜是因为它会在加载图像之前计算大小。

我该如何纠正这个问题？

我尝试在$(document).ready 内运行插件$("selector").myplugin()，但这并没有改变任何东西

我还尝试将setTimeout 包裹在我使用naturalHeight 和naturalWidth 的变量周围，但这并不能阻止其余代码运行——而且我不会让它的加载速度比必要（如果没有必要，将所有内容包装在 setTimeout 中）

所以我的问题 - 有没有办法

如果大小为 0 - 稍等片刻再试一次
在不再为 0 之前不要继续跑步休息

或者有人有其他解决方案吗？

【问题讨论】：

如果你的脚本需要在图片加载后运行，你应该使用$(window).load()而不是$(document).ready()
在img 元素上使用onload 事件，这里有一些方法：stackoverflow.com/questions/623172/…

标签： javascript jquery image performance size

【解决方案1】：

Ready 只等待 dom 被加载，在这种情况下你可以在你的图像上按顺序使用 load()，你不会等到所有的 window elm 都加载完

加载图片后看下面sn-p，这个最后的尺寸是打印在底部的，

$(function(){
  $( "#img" ).load(function() {
    console.log($(this).width()+"-"+$(this).height())
  });
    
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="img" src="https://cdn.pixabay.com/photo/2017/09/07/14/15/wide-2725426_960_720.jpg" >

【讨论】：