javascript 阻止图像在 ie6 和 ie7 的新加载时显示答案

【问题标题】：javascript preventing images from displaying on fresh load in ie6 and ie7javascript 阻止图像在 ie6 和 ie7 的新加载时显示
【发布时间】：2011-07-11 22:04:19
【问题描述】：

我的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 代码后删除所有浏览器历史记录/缓存进行测试。

【问题讨论】：

我不明白你想用 CSS 无法预先完成的 JavaScript 做什么。正在动态完成什么以及为什么？
如果启用了javascript，则可以使用jQuery和Lightbox等插件，并且需要一定的html格式。如果 Javascript 被禁用，那么我希望网站可以完全访问。

标签： javascript jquery internet-explorer-7 internet-explorer-6

【解决方案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 中。

【讨论】：