Javascript 使用jQuery插入时不总是设置图像的高度

我在中间有一组项目（缩略图），悬停时会在侧栏中激发更多信息和大图像。

当我使用下面的代码时，有时边栏中图像的高度是0。当转到不同的缩略图并返回时，可以正确设置高度

//this code is run on hover
   var maxHeight=140;
   $.each(bigimages, function(index,el){
      var url = $(this).html(); //each of bigimages class have content of text url

      var newli = $('<li><img class="banner-img" src="'+url+'" ></li>');
      $(".banner ul").append(newli).promise().done(function(){

          console.log("img "+newli.find("img")[0].height); //here sometimes is 0

          if(newli.find("img")[0].height>maxHeight){
                                    maxHeight=newli.find("img")[0].height;

                                }
                            });
});

//此代码在悬停模式下运行
var maxHeight=140；
$.each（大图像、函数（索引、el）{
var url=$（this）.html（）；//每个bigimages类都有文本url的内容
var newli=$（“
”）；
$（“.banner ul”）.append（newli.promise（）.done（function（））{
console.log（“img”+newli.find（“img”）[0].height）；//这里有时是0
if（newli.find（“img”）[0].height>maxHeight）{
maxHeight=newli.find（“img”）[0]。高度；
}
});
});

编辑

---

大图像总是存在，因此为什么此代码将0显示为高度？

可能是因为在尝试访问

height

属性时图像尚未完成加载。您可以使用示例代码作为基础，连接一些图像预加载来实现这一点：

$(".banner ul").append(newli).promise().done(function() {
    var img = new Image();
    img.src = newli.find('img').attr('src');
    img.onload = function()
    {
        conosle.log( this.height );

        if( this.height > maxHeight )
        {
            maxHeight = this.height;
        }
    }
});

---

当前，您尝试在将

和

添加到DOM后立即检查高度。在此阶段，不加载图像

---

在使用jQuery时，将

load（）

事件处理程序附加到映像。

您将新的HTML附加到

ul

元素，但这并不意味着映像会立即加载。如果在图像的

onload

事件触发之前读取

height

属性，则会得到零。考虑将一些代码附加到图像的代码> OnLoad 事件，并使代码消耗高度属性。大概是这样的：

//this code is run on hover
var maxHeight = 140;
$.each(bigimages, function(index, el) {
    var url = $(this).html(); //each of bigimages class have content of text url

    var newli = $('<li><img class="banner-img" src="' + url + '" ></li>');
    var image = newli.find("img");
    image.on("load", function() {
        console.log("img " + $(this)[0].height); //here sometimes is 0

        if ($(this)[0].height > maxHeight) {
            maxHeight = $(this)[0].height;
        }
    });
    $(".banner ul").append(newli).promise().done(function() {
        //anything else you need to do after promise
    });
});

//此代码在悬停模式下运行
var maxHeight=140；
$.each（大图像、函数（索引、el）{
var url=$（this）.html（）；//每个bigimages类都有文本url的内容
var newli=$（“
”）；
var image=newli.find（“img”）；
image.on（“加载”，函数（）{
console.log（“img”+$（this）[0].height）；//这里有时是0
如果（$（此）[0]。高度>最大高度）{
maxHeight=$（此）[0]。高度；
}
});
$（“.banner ul”）.append（newli.promise（）.done（function（））{
//承诺之后你还需要做什么
});
});

检查元素是否已加载，如果未加载，则返回“0”

使用窗口加载

$(window).load(function(){
//put your code here, window load runs after document ready.
});

---

问题是什么？@codenoir-我用问题编辑。一张图片的最大高度是500px，另一张是140px。说来话长，

.banner

实际上是一个旋转木马滑块。所以为了在旋转木马中显示图像，我需要它的高度不能只显示部分图像。@Mike抱歉，发现了我错过的逻辑。请查看更新的答案。

$（this）[0]。高度

==

此高度

。