JavaScript, препятствующий отображению изображений при новой загрузке в ie6 и ie7 - PullRequest
Новая
       13

JavaScript, препятствующий отображению изображений при новой загрузке в ie6 и ie7

0 голосов
/ 12 июля 2011

Структура моего 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, кажется, препятствует отображению изображения. Я попытался отладить в IE7 с помощью инструментов веб-разработчика, и элемент изображения есть, но по какой-то причине не показывается Я никоим образом не изменял видимость или отображение элемента изображения или элементов 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-кода.

1 Ответ

1 голос
/ 12 июля 2011

Это удар в темноте, но я сам сталкивался с чем-то похожим в IE.

Возможно, это связано с тем, что изображения не загружаются вовремя для DOM, когда ваш 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 при необходимости.

...