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

Я показываю кучу уменьшенных изображений, и задержка может быть очень высокой (через VPN), поэтому я отправляю все миниатюры в один файл (например, спрайт) и устанавливаю свойства фонового изображения и фоновой позиции CSS div для отображения эскизов. Проблема, с которой я столкнулась, связана с 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?

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

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

Ответ 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]: это просто логический индикатор для диалогового окна, который не используется всей возможной командой. Но используется, например, для сохранения файлов/создания ссылки /etc... Например: http://man.ddvip.com/web/dhtml/constants/createlink.html

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

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

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

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

Ответ 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

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

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

Ответ 3

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

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

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

Ответ 4

вам нужно сначала вставить в 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');