Предварительная загрузка изображения Javascript, я делаю что-то не так - PullRequest
Новая
       27

Предварительная загрузка изображения Javascript, я делаю что-то не так

2 голосов
/ 14 ноября 2011

Я использую document.images для загрузки изображений, когда посетитель впервые заходит на сайт. Причина в том, что у меня есть несколько разных областей, в которых есть ролловеры. Прежде чем я переключусь на использование CSS-спрайтов (изменяя большую работу), я собираюсь спросить здесь.

Итак, я загружаю изображения следующим образом: 

images = new Array();

if (document.images) {
    images.push(preloadImage("http://website.com/images/myimg.png", 300, 200));
}

function preloadImage(src, x, y) {
    var img = new Image(x, y);
    img.src = src;
    return img;
}

И в соответствии с "ресурсной" панелью Chrome, это работает просто отлично. Даже после нажатия CTRL + F5 изображения, перечисленные в JS, загружаются.

ОДНАКО они не используются. Если навести курсор на элемент в одном из трех моих сценариев, изображение будет загружено во второй раз . Derp

Я предполагаю, что при предварительной загрузке изображений вы должны использовать этот массив изображений. Я думал, что браузер будет достаточно умен, чтобы сказать: «Эй, это одно и то же изображение, давайте использовать его дважды», но, очевидно, нет.

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

Ответы [ 2 ]

2 голосов
/ 14 ноября 2011

Это не совсем ответ на ваш вопрос, но я предлагаю другое решение. Поместите все изображения, необходимые для предварительной загрузки, в div, который скрыт от пользователя. Я знаю, я знаю, это не так элегантно, но все должно работать нормально. :) 

<div style="display: none;">
    <img src="http://website.com/images/myimg.png" alt=""/>
    ...
</div>
1 голос
/ 14 ноября 2011

Это прекрасно работает для меня: 

    function imgPreload() {
        var imageList = [
            "my/firstimage.png",
            "my/secondimage.jpg",
            "my/thirdimage.png"
        ];
        for (var i = 0; i < imageList.length; i++ ) {
            var imageObject = new Image();
            imageObject.src = imageList[i];
        }
    }

    imgPreload();

Приветствия. Frank

...