Question

我的html结构基本上是：

<div id="featured">
  <a href=""><img src="" alt="" /></a>
  <div class="image-description">text</div>
</div>

使用css：

#featured { width: 800px; height: 250px; text-align: center; position: relative; }
img { width: auto; height: 250px; }
.image-description { position: absolute; bottom: 10px; }

我有一些javascript动态修改我的html并且在除IE6和IE7之外的其他所有浏览器中都能正常工作。它在IE8 +中运行良好。

在IE6和IE7中，它似乎阻止了图像的显示。我尝试使用Web开发人员工具在IE7中进行调试，并且图像元素在那里，但由于某种原因没有显示。我没有以任何方式修改css或js修改图像元素或容器div的可见性或显示。

通过评论我的javascript，我将其缩小到这个：

$featured = $('#featured');
// calculate var $desc_left now to eliminate/reduce description div "jumping"
var $desc_left = ( ( $featured.width() - $featured.find('img').width() ) / 2 ) + 10;
$featured.find('.image-description').css('left', $desc_left);
$featured.find('img').load(function() {
    // calculate var $desc_left again to make sure all browsers get the correct widths, like webkit browsers
    var $desc_left = ( ( $featured.width() - $featured.find('img').width() ) / 2 ) + 10;
    $featured.find('.image-description').css('left', $desc_left);
});

如果我不断重新加载页面，最终会出现图像。评论整个事情使IE7正常显示图像。通过在更改js代码后删除所有浏览器历史记录/缓存进行测试。

Answer 1

这是一个黑暗中的刺，但我在IE中遇到过类似的东西。

当JavaScript执行时，可能与DOM没有及时下载的图像有关。多次重新加载页面会强制DOM使用图像的缓存版本，以便它可以正常工作。

试试这个。在执行内部代码之前，$(window).load将等待下载所有图像。

$(window).load(function () {

    //  the following is all of your jQuery JavaScript that depends on your images being available.

    $featured = $('#featured');
    // calculate var $desc_left now to eliminate/reduce description div "jumping"
    var $desc_left = ( ( $featured.width() - $featured.find('img').width() ) / 2 ) + 10;
    $featured.find('.image-description').css('left', $desc_left);
    $featured.find('img').load(function() {
        // calculate var $desc_left again to make sure all browsers get the correct widths, like webkit browsers
    var $desc_left = ( ( $featured.width() - $featured.find('img').width() ) / 2 ) + 10;
    $featured.find('.image-description').css('left', $desc_left);
    });

});

如果需要，$(window).load也可以嵌套在$(document).ready内。

javascript阻止图像在ie6和ie7中的新负载上显示

1 个答案: