innerHTML заставляет IE6 (постоянно) блокироваться

Question

На сайте, над которым я работаю, я загружаю серию изображений, которые можно анимировать, используя некоторые элементы управления, которые я реализовал, с помощью javascript. Все отлично работает во всех браузерах, кроме IE6, который блокируется и никогда не восстанавливается; по крайней мере, не с 15 минут, которые я оставил там.

Часть, которую он душит, - это часть, в которой я пытаюсь изменить содержимое определенного элемента.

Перед проблемой:

<div id='animation_image'></div>

После проблемы:

<div id="animation_image">  
  <div id="daily_loop_image_13" class="loop_image">
    <img name="animation" src="/path/to/image/13/20100119/world_14.gif" 
      class="hiddenElements" border="0">
    </div> 
  <div id="daily_loop_image_12" class="loop_image">
    <img name="animation" src="/path/to/image/12/20100119/world_13.gif" 
      class="hiddenElements" border="0">
  </div> 
  <div id="daily_loop_image_11" class="loop_image">
    <img name="animation" src="/path/to/image/11/20100119/world_12.gif" 
      class="hiddenElements" border="0">
  </div> 
  <div id="daily_loop_image_10" class="loop_image">
    <img name="animation" src="/path/to/image/10/20100119/world_11.gif" 
      class="hiddenElements" border="0">
  </div> 
  <div id="daily_loop_image_9" class="loop_image">
    <img name="animation" src="/path/to/image/9/20100119/world_10.gif" 
      class="hiddenElements" border="0">
  </div> 
  <div id="daily_loop_image_8" class="loop_image">
    <img name="animation" src="/path/to/image/8/20100119/world_9.gif" 
      class="hiddenElements" border="0">
  </div> 
  <div id="daily_loop_image_7" class="loop_image">
    <img name="animation" src="/path/to/image/7/20100119/world_8.gif" 
      class="hiddenElements" border="0">
  </div> 
  <div id="daily_loop_image_6" class="loop_image">
    <img name="animation" src="/path/to/image/6/20100119/world_7.gif" 
        class="hiddenElements" border="0">
  </div> 
  <div id="daily_loop_image_5" class="loop_image">
    <img name="animation" src="/path/to/image/5/20100119/world_6.gif" 
        class="hiddenElements" border="0">
  </div> 
  <div id="daily_loop_image_4" class="loop_image">
    <img name="animation" src="/path/to/image/4/20100119/world_5.gif" 
        class="hiddenElements" border="0">
  </div> 
  <div id="daily_loop_image_3" class="loop_image">
    <img name="animation" src="/path/to/image/3/20100119/world_4.gif" 
        class="hiddenElements" border="0">
  </div> 
  <div id="daily_loop_image_2" class="loop_image">
    <img name="animation" src="/path/to/image/2/20100119/world_3.gif" 
        class="hiddenElements" border="0">
  </div> 
  <div id="daily_loop_image_1" class="loop_image">
    <img name="animation" src="/path/to/image/1/20100119/world_2.gif" 
        class="hiddenElements" border="0">
  </div> 
  <div id="daily_loop_image_0" class="loop_image">
    <img name="animation" src="/path/to/image/0/20100119/world_1.gif" 
        class="" border="0">
  </div> 
  <div id="weekly_loop_image_1" class="loop_image">
    <img name="animation" src="/path/to/weeklyImage/1/20100119/world_wk2max.gif" 
        class="hiddenElements" border="0">
  </div> 
  <div id="weekly_loop_image_0" class="loop_image">
    <img name="animation" src="/path/to/weeklyImage/0/20100119/world_wk1max.gif" 
        class="hiddenElements" border="0">
  </div>
</div>

Я пробовал:

• сохранение всех элементов с animation_image в виде строки и установка в качестве innerHTML
• создание пустых / местозаполнителей div с анимационным изображением и заполнение их индивидуально
• с использованием appendChild вместо innerHTML
• добавление еще одного div в "animation_image" и помещение туда всех изображений / div, используя 3 метода выше

Кажется, что ничего из этого не работает в IE6 - все методы прекрасно работают в FF3.0 +, IE7 +, Chrome 2+ и т. Д. Если я выхожу из javascript до innerHTML, он работает просто отлично, но если я даже пытаюсь заполнение одного элемента div (в animation_image) с помощью метода во втором пункте маркера, он блокируется и никогда не восстанавливается.

Я уверен, что что-то пропустил, но я совершенно испугался банкомата. Заранее спасибо.

Обновление: вот ссылка на javascript вместе с образцом XML (http://pastebin.com/m5b426a67)

Answer 1

Не совсем уверен, как я пропустил это в мои дни и дни поиска в Google, но похоже, что проблема связана с "исправлением" AlphaImageLoader для работы с прозрачными PNG.В статье, которую я нашел, более подробно рассматривается основная проблема:

http://blogs.cozi.com/tech/2008/03/transparent-pngs-can-deadlock-ie6.html

Когда я удалил запись в png_fix.css, страница в ее первоначальном виде без проблем загружалась в IE6.Теперь мне просто нужно пойти и попытаться преобразовать все (прозрачные) png-файлы в gif-файлы, которые тоже могут оказаться неосуществимыми.

Я действительно ценю помощь всех и приношу извинения за любые дикие гусиные преследования, на которые я отправлял людей,Спасибо всем ОЧЕНЬ ОЧЕНЬ большое.

Answer 2

Если больше ничего не работает, вы можете использовать оператор try ... catch и отобразить понятное сообщение об ошибке, если попытка перехватывается.

Answer 3

Возможно, я пропустил это, поскольку я только просматривал код, но любые манипуляции с DOM должны выполняться после DOM Ready, особенно в IE6.Вы пробовали это?

$(document).ready(function(){
 $('#animation_image').html(animHTML);
});

Если вы пробовали это, я посмотрю на это дальше.

Answer 4

Эту проблему я видел несколько раз. В IE кажется (во всяком случае, мне) ошибка при установке свойства innerHTML с чем-то, что содержит внешние ресурсы (изображение, скрипт и т. Д.).

Вы добавляете несколько тегов img. Каждый мог вызвать эту проблему. Вот что я рекомендую:

Вместо создания этого HTML и установки свойства innerHTML

var html = '<div id="daily_loop_image_4" class="loop_image">
    <img name="animation" src="/path/to/image/4/20100119/world_5.gif"
         class="hiddenElements" border="0">
</div>';
outerDiv.innerHTML = html;

Запустите этот скрипт, чтобы добавить HTML:

var div = document.createElement('div');
div.id = 'daily_loop_image_4';
div.className = 'loop_image';

var img = document.createElement('img');
img.name = 'animation';
img.src = '/path/to/image/4/20100119/world_5.gif';
img.className = 'hiddenElements';
img.border = 0; //Shouldn't this be done in css?

div.appendChild(img);
outerDiv.appendChild(div);

Answer 5

Ранее у меня была похожая проблема, и я исправил ее, установив таймаут для метода innerHTML.
Я не уверен, применимо ли это здесь или нет, но я бы сказал, просто попробуйте.

Answer 6

Нет ничего, что выскакивает сразу.

Первое, что я хотел бы сделать, это попробовать автономный скрипт: буквально создать пустую HTML-страницу только с этим скриптом. Если это работает, вероятно, что какой-то другой фрагмент сценария вызывает проблему.

Если он все еще ломается, попробуйте упростить скрипт. Попробуйте обрезать вывод, который вы вводите animHTML, например, попробуйте без всех атрибутов. Может быть alert (или иным образом вывести) animHMTL, чтобы увидеть, есть ли что-нибудь очевидное, что могло бы сломать IE? Возможно странный / плохо закодированный символ в XML?

Answer 7

Другим вариантом может быть использование спрайта. Соберите все разрозненные изображения в один файл и поместите большое изображение соответствующим образом в элементы div, используя свойства фона CSS (положение, повтор и т. Д.). Я не уверен, насколько велики ваши отдельные файлы, но это может сработать для вас.

В интернете есть много ссылок, как это сделать, но вот одна .