的JavaScript防止顯示圖片在IE6和IE7

我的HTML的結構新鮮的負荷基本上是：的JavaScript防止顯示圖片在IE6和IE7

<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中，它似乎阻止圖像顯示。我嘗試在IE7中使用Web開發工具進行調試，並且圖像元素在那裏，但由於某種原因沒有顯示。我沒有以任何方式修改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代碼後，通過刪除所有瀏覽器歷史記錄/緩存進行測試。

來源

2011-07-11 gavsiu

我不明白你想用JavaScript做什麼，不能用CSS來完成。動態做什麼，爲什麼？ – Sparky

如果啓用了javascript，那麼jQuery和Lightbox以及其他插件都可用，並且它們需要特定的html格式。如果Javascript被禁用，那麼我想讓網站完全可用。 – gavsiu

這是在黑暗中刺，但我在IE自己遇到類似的東西。

這可能與JavaScript執行時未及時下載圖像有關。多次重新加載頁面會迫使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內。

來源

2011-07-11 22:49:02 Sparky

的JavaScript防止顯示圖片在IE6和IE7

回答

相關問題