У меня есть веб-страница, созданная скриптом php, которая при загрузке будет содержать от 0 до N элементов div. Для каждого div я запускаю определенный код JavaScript, который манипулирует данными, относящимися к этому div.
Одна из функций этого кода - создать элемент img и установить его атрибут ' src ' для определенного URL-адреса изображения известного (но переменного) размера. Это сделано для кеширования. Эти изображения не должны отображаться в исходном макете страницы, но каждое должно появляться после определенного пользовательского ввода (при наведении мыши), поэтому я пытаюсь кэшировать изображения, чтобы их появление не заняло много времени.
Загрузка изображений, конечно, занимает время - и каждый раз, когда изображение загружает кодовые блоки, что приводит к большому времени загрузки. пример:
<div id="i1">
<script type="text/javascript">
/* run code relevant to 'i1', and amongst other things load some image
into a detached img element for later use. let's call this code 'bcode' */
</script>
<div id="i2">
<script type="text/javascript">
/* run 'bcode' for i2 */
</script>
<div id="...and so on">
Чтобы попытаться запустить код асинхронно, я попробовал это:
<div id="i1">
(function() {
var asyncScriptElement = document.createElement('script');
asyncScriptElement.async = true;
var scriptText = document.createTextNode ('here I put all of the relevant "bcode"');
asyncScriptElement.appendChild (scriptText);
document.getElementById ('Img_1_2').appendChild (asyncScriptElement);
}());
Он работает под FF (все еще недостаточно быстро) и, очевидно, не работает под IE.
Есть ли у вас какие-либо предложения относительно того, как этого добиться?
Также обратите внимание, что мне на самом деле не нужно ничего получать от другого внешнего php (т.е. использовать XMLHttpRequest) - я получил все данные, которые мне нужны в этом php. Мне просто нужен способ разблокировки загрузки картинок ...