IE6: событие загрузки фонового изображения

Question

Я отображаю кучу миниатюрных изображений, и задержка может быть очень высокой (через VPN), поэтому я отправляю все миниатюры в одном файле (например, в спрайте) и задаю свойства CSS background-image и background-positiondiv, чтобы показать миниатюры.У меня проблема с IE6 и выяснение, когда изображение загружено ... Я использую взлом BackgroundImageCache:

document.execCommand("BackgroundImageCache",false,true);

Чтобы проверить, загружено ли изображение, я использую этот код:

$('<img>').attr('src', 'ThumbSpriteTest.png').load(function() {
    $('.Thumbnails').css('background-image', 'url(ThumbSpriteTest.png)');
});

Это работает во всех браузерах, которые я пробовал, кроме IE6 ... даже при взломе кеша он загружает изображение, запускает событие, устанавливает свойство background-image и снова загружает изображение (иМои элементы .Thumbnail при повторной загрузке остаются пустыми.)

Мне кажется, что взлом кэша только изменяет поведение ссылок CSS, а не тега img.Как я могу узнать, когда фоновое изображение загружается, не загружая его дважды?Возможно ли это в IE6?

EDIT: Использование: document.execCommand("BackgroundImageCache",true,true);, кажется, работает (с обоими параметрами как 'true').У меня возникают проблемы с поиском какой-либо документации по команде BackgroundImageCache и ее параметрам (я нашел множество примеров ее использования для решения проблемы CSS, но все они используют false,true в качестве параметров и не объясняют их) ... щедрость по-прежнему хороша для всех, у кого есть хорошая информация / документация по команде BackgroundImageCache и ее параметрам!

(я не уверен, почему я рад найти что-то, что работает послеиз-за недостатка IE тратить столько времени)

Answer 1

Это определенно плохо документировано, так как оно считается исправлением для ie6 и останется таким, увидев, что это уже исправлено в ie8. Во всяком случае, вот что выкопано об этом.

метод execCommand: http://msdn.microsoft.com/en-us/library/ms536419(v=vs.85).aspx

 bSuccess = object.execCommand(sCommand [, bUserInterface] [, vValue]);
 //sCommand is the name of command to execute
 //[bUse...] is to give permission to display a dialog window (if applicable)
 //[vValue] value to pass as parameter to the command

[bUserInterface]: просто логический индикатор для диалогового окна, который используется не всеми возможными командами. Но используется, например, для сохранения файлов / создания ссылки / и т.д ... Например: http://man.ddvip.com/web/dhtml/constants/createlink.html

Так что вы можете проверить, работает ли это значение при значении false, оно должно работать теоретически ... Но исправления могут сломаться по забавным причинам.

О исправлении: http://support.microsoft.com/kb/823727

В любом случае, эта функция появляется только как патч для IE6. Итак, предположим, что это будет работать для всех браузеров ie6 Хотя он был введен для предотвращения множественной загрузки + утечек, а не для «кэширования» способа, которым вы его используете, он все же делает то, что следует из названия (надеюсь) Так что не удивляйтесь, если на непатчированных версиях это не работает (автоматическое обновление должно исправить это)

С этим предупреждением, пожалуйста, перехватите выполнение для логических значений успеха или сбоя, если у вас есть функции, зависящие от него. И я думаю, что лучше всего использовать то, что у вас есть (достаточно грустно, чтобы быть вынужденным поддержать ie6)

Answer 2

1) css свойство:

$('<img>').attr('src', 'ThumbSpriteTest.png').load(function() {
    $('.Thumbnails').css('background-image', 'url(ThumbSpriteTest.png)');
});

2) attr ('src', ' ThumbSpriteTest.png ') - может быть проблемой

Значения некоторых атрибутов сообщаются непоследовательно в разных браузерах и даже в разных версиях одного браузера.Метод .attr () уменьшает такие несоответствия.

См. http://api.jquery.com/attr/

3) Также:

<script type="text/javascript">
try {
 document.execCommand('BackgroundImageCache', false, true);
} catch(e) {}
</script>

ИЛИ попробуйте CSS way

html { 
filter: expression(document.execCommand("BackgroundImageCache", false, true)); 
}

последние примеры были найдены здесь: Jquery IE6 проблемы с наведением, продолжает загружать фоновое изображение

Answer 3

Вы должны сначала вставить в DOM, затем присоединить к событию img.load, затем поставить src, и все должно работать в IE.Проблема в том, что IE не запускает событие onload всегда, если src установлен перед обработчиком onload.

$('<img style="display:none"/>').appendTo('body').load(function() {
    $('.Thumbnails').css('background-image', 'url(ThumbSpriteTest.png)');
}).attr('src', 'ThumbSpriteTest.png');

Answer 4

Если вы используете свой код выше только для IE6, а проблема отражается только в IE6, то, я думаю, ваша проблема в jquery ... проверьте следующее:

$('.Thumbnails').css('background-image', 'url(ThumbSpriteTest.png)');

Вы должны добавить 'url(img_src)'.