Работает ли функция предварительного загрузчика jQuery Image? - PullRequest
Новая
       11

Работает ли функция предварительного загрузчика jQuery Image?

0 голосов
/ 30 июля 2011

Я написал функцию, которая загружает все большие изображения из галереи лайтбокса, на которые ссылается ссылка (для тех, кто не знает) после загрузки всех маленьких изображений $ (window) .load ().

Вот код: 

$(window).load(function() {
    if ($('ul#gallery').length > 0) {
        // make a container, fill in images and attach it to the page body
        var c = $("<div />").attr({style: 'display: none', id: 'gallerypreload'});
        $("ul#gallery li > a").each(function() {
            $('<img />').attr('src', $(this).attr('href')).appendTo(c);
        });
        c.appendTo('body');
    }
});

Галерея выглядит следующим образом: 

<ul id="gallery">
    <li><a href="/img/image.jpg" title="Image title"><img src="img/thumbnail.jpg" alt="Image title" /></a></li>
    <li><a href="/img/image.jpg" title="Image title"><img src="img/thumbnail.jpg" alt="Image title" /></a></li>
    <li><a href="/img/image.jpg" title="Image title"><img src="img/thumbnail.jpg" alt="Image title" /></a></li>
    <li><a href="/img/image.jpg" title="Image title"><img src="img/thumbnail.jpg" alt="Image title" /></a></li>
    <li><a href="/img/image.jpg" title="Image title"><img src="img/thumbnail.jpg" alt="Image title" /></a></li>
</ul>

Я хочу сделать это, потому что браузер должен сначала загрузить все эскизы иЗатем предварительно загрузите большие изображения для просмотра.Кроме того, я написал какой-то эффект затухания, который также вызывается $ (window) .load ().

Мой вопрос здесь такой: ВСЕ браузеры предварительно загружают изображения, прикрепленные к телу, в контейнер?Следовательно, это не отображается, теоретически они не должны загружать изображения, или они?Должен ли я стиль visibility: hidden; width:0; height:0 или мой подход работает?

Спасибо.

1 Ответ

3 голосов
/ 30 июля 2011

Вы можете принудительно выполнить предварительную загрузку, создав объекты изображения javascript с помощью src, который вы хотите предварительно загрузить 

$("ul#gallery li > a").each(function() {
    var preload = new Image();
    preload.src = $(this).attr('href');
    $('<img />').attr('src', preload.src).appendTo(c);
});

Тогда не должно иметь значения, видны ли тэги IMG или нет

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

$("ul#gallery li > a").each(function() {
    var preload = new Image();
    preload.src = $(this).attr('href');
});

или даже 

$("ul#gallery li > a").each(function() {
   (new Image()).src = $(this).attr('href');
});
...