Question

所以我长期以来一直在敲打这个问题，但似乎无法让它发挥作用。我已经阅读了类似的问题并尝试了他们的答案，但他们并没有为我工作，所以我在这里。

我有一个滑块，它包含一些标签，我想设置容器div的高度等于图像的高度。首先是html：

<section class="row" id="carousel">
    <ul class="rslideshow"> <!-- Images appear here -->
      <li><img src="../img/image1.jpg" alt=""></li>
      <li><img src="../img/image2.jpg" alt=""></li>
      <li><img src="../img/image3.jpg" alt=""></li>
      <li><img src="../img/image4.jpg" alt=""></li>
      <li><img src="../img/image5.jpg" alt=""></li>
    </ul>
</section>

这是我尝试的第一个代码：

function setHeight(ab){
        var heightImage = $('.rslideshow > li:first-child > img').height();
        ab.height(heightImage);
        console.log(heightImage);
    }
    setHeight($('.rslideshow'));
    $(window).resize(function() {
        setHeight($('.rslideshow'));
    });

问题是图像的高度计算为0.原因是只要DOM树准备好就会触发document.ready触发器。此时，图像尚未加载。所以我尝试使用setTimeout延迟，但它不起作用，无论如何都不可靠。接下来，我尝试使用jquery的onLoad：

function setHeight(ab){
    var target = $('.rslideshow > li:first-child > img'),
        heightImage = 200;

    target.on('load', function(){
        heightImage = $(this).height();
        console.log(heightImage);
        ab.height(heightImage);
    });

}
setTimeout(setHeight($('.rslideshow')), 500);
$(window).resize(function() {
    setHeight($('.rslideshow'));
});

这似乎有效但由于某种原因，onLoad不会触发window.resize。我还在Jquery的网站上看到onLoad不可靠并且跨浏览器。

所以这就是我被困住的地方。有任何想法吗？我也对非JavaScript的解决方案持开放态度。

Answer 1

使用complete元素的readyState或img JavaScript属性，如以下代码段所示。

$(function () {
    function setHeight(ab) {
        var target = $('.rslideshow > li:first-child > img'),
            heightImage;
        if (target[0].complete || target[0].readyState === 4) {
            heightImage = target.height();
            ab.height(heightImage);
        }
        else {
            target.on('load', function () {
                heightImage = $(this).height();
                console.log(heightImage);
                ab.height(heightImage);
            });
        }
    }
    setHeight($('.rslideshow'));
    $(window).resize(function () {
        setHeight($('.rslideshow'));
    });
});

<强>解释

complete - 返回浏览器是否已完成加载图像。

readyState - 使用Image Element constructor或触发AJAX的onreadystatechange事件时，我们可以使用readyState属性。请查看以下readyState详细信息。

State  Details

0      Request is not initialized
1      Connected with server
2      Request has been sent
3      Request is in process
4      Request is completed

希望这有帮助！

Answer 2

看看at this pen：

HTML

<section class="row" id="carousel">
<ul class="rslideshow" stlye="list-style-type: none !important;"> <!-- Images appear here -->
  <li><img src="https://placehold.it/350x150" alt=""></li>
  <li><img src="https://placehold.it/350x150" alt=""></li>
  <li><img src="https://placehold.it/350x150" alt=""></li>
  <li><img src="https://placehold.it/350x150" alt=""></li>
  <li><img src="https://placehold.it/350x150" alt=""></li>
</ul>
</section>

使用Javascript：

$(window).load(function() {

   setHeight($('.rslideshow'));  

})

function setHeight(ab) {
  var target = $('.rslideshow > li:first-child > img'),
    heightImage = 50;

  target.on('load', function() {
    ab.height(heightImage);
  });

}
$(window).resize(function() {
  setHeight($('.rslideshow'));
});

请注意使用$(window).load(function() {});

一旦加载了dom上的所有内容，就会被触发，这意味着图像将在脚本运行之前存在。

您的＆＃39; setTimeout＆＃39;方法不正确。它需要通过一个函数，例如：

setTimeout(function() {

    // Run timeout function here

}, 500);

Answer 3

如果从缓存加载图片，您可能希望使用$('img').one()来获取图片load事件回调并使用img元素的complete属性。

示例：

$(function(){
    //Page Loaded
  $("img").one("load", function() {
    //Image Loaded (Your handling here)
  }).each(function() {
    //Trigger Image load event if image already loaded when page loaded
    if(this.complete) $(this).load();
  });
});

JS小提琴示例：http://jsfiddle.net/5chcgbLc/2/

将div的高度设置为等于图像的高度

3 个答案: