查找img大小并设置为div高度和宽度的jquery。
我试图让jquery在猫头鹰旋转木马中找到每个图像的大小(每页8-10幅图像)。出于某种原因，在开发人员中，我只需要返回width 0px, height: 0px
下面是来自developer的元素：
<div class="item" style="width: 0px; height: 0px;">
<img src="url.com/img.jpg" alt="">
</div>我的jquery：
$('.item').each(function() {
var $this = $(this),
w = $this.find('img').width(),
h = $this.find('img').height();
$this.width(w).height(h);
});如何在jquery加载时管理jquery以获取图像的大小？
回答 3
Stack Overflow用户
发布于 2015-03-27 19:15:35
在查询图像的高度和宽度之前，需要等待加载图像。
代码片段如下，
$(document).ready(function() { /* Just added this part */
$('.item').each(function() {
var $this = $(this),
$img = $this.find('img');
$img.load(function(){
var w = $this.find('img').width();
var h = $this.find('img').height();
alert("width: " + w + " & height: " + h);
$this.width(w).height(h)
});
;
});
}); /* Just added this part */<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="item" style="width: 0px; height: 0px;">
<img src="http://dummyimage.com/190x100/000/fff.png
" alt="" />
</div>
Jquery函数是在dom准备好之后触发的，而不是在确保加载了图像之后触发的。https://api.jquery.com/ready/。
Stack Overflow用户
发布于 2015-03-27 15:53:46
加载所有DOM元素后，需要启动脚本。这也是一个很好的做法。由于您使用的是jQuery，所以只需使用.ready()事件触发脚本即可。
小提琴在这里
代码片段如下，
$(document).ready(function() {
$('.item').each(function() {
var $this = $(this),
pic = $this.find('img');
if (pic.load) {
var w = pic.width();
var h = pic.height();
$this.width(w).height(h);
} else {
return;
}
});
alert("width : " + $('.item').width() + " & height : " + $('.item').height());
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="item" style="width: 0px; height: 0px;">
<img src="http://dummyimage.com/190x100/000/fff.png
" alt="" />
</div>
希望这能有所帮助。快乐编码:)
更新：：
另一个更新的小提琴在这里
这一次，我添加了一个虚拟的div元素，并给这个div以item div的高度和宽度。
更新2：：您需要等待至少要加载的映像，然后才能运行脚本来查找图像的高度和宽度，并将其应用到父div，在您的示例中，父div就是"item“div。因此，如果您想在DOM树中映像就绪但不想等待整个文档DOM树准备就绪时运行脚本，那么可以使用jQuery .on("DOMready",".item img",function(){});事件函数来实现。我觉得这多少有点像懒散的图像。
另一个更新：：更新了我的答案，因为根据这些jQuery、.ready()和.load() API的引用，当DOM准备就绪时，可能不会加载映像。
Stack Overflow用户
发布于 2015-03-27 15:48:37
示例：https://jsfiddle.net/pomfr960/
试试这个：
$('.item').each(function () {
var $this = $(this);
var img = $this.find('img');
if(!img.length) return;
img[0].onload = function () {
var w = img.width(),
h = img.height();
$this.width(w).height(h);
}
});https://stackoverflow.com/questions/29304695
复制相似问题
腾讯云开发者
