Предварительная загрузка изображения с массивом

Я использую следующий код для предварительной загрузки изображений в галерее изображений:

$(окно).bind('загрузить', функция(){

var imageNumber = $(".image").attr("alt");
var imageUp = parseInt(imageNumber) + 1 
var imageUp2 = parseInt(imageNumber) + 2    
var imageDown = parseInt(imageNumber) - 1
var preload = [
    'image' + imageUp + '.jpg',
    'image' + imageUp2 + '.jpg',
    'image' + imageDown + '.jpg',
    ];

    $(document.createElement('img')).bind('load', function(){
    if(preload[0]) this.src = preload.shift();
     }).trigger('load');

});

Я изменил еще один базовый сценарий предварительной загрузки javascript/jQuery, добавив переменные, чтобы получить числовое значение из тега alt текущего изображения и предварительно загрузить изображения, которые находятся непосредственно перед и после него (n+1 n+2 n-1) в галерее. . Это работает, хотя я думаю, что это может быть довольно уродливым.

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

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

Веб-дизайн для меня всего лишь хобби (я фотограф), поэтому мои знания javascript ограничены — достаточно, чтобы настраивать готовые функции и коллажировать фрагменты кода.

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

Заранее спасибо,

Том


javascript jquery image-preloader
person Thom    schedule 16.09.2010    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я никогда не использовал скрипт предварительной загрузки jQuery, но я сделал много предварительной загрузки с помощью «ванильного» javascript. Попробуйте код, который я добавил ниже, он может решить вашу проблему.

function preLoad() { // my preload function;
    var imgs = arguments, imageFolder = [];

    for (var i = 0; i < imgs.length; i += 1) {
        imageFolder[i] = new Image();
        imageFolder[i].src = imgs[i];
    }
}

var gallary = []; // all gallary images

$(window).bind('load', function(){

var imageNumber = $(".image").attr("alt");
var imageUp = parseInt(imageNumber) + 1 
var imageUp2 = parseInt(imageNumber) + 2    
var imageDown = parseInt(imageNumber) - 1
var preload = [
    'image' + imageUp + '.jpg',
    'image' + imageUp2 + '.jpg',
    'image' + imageDown + '.jpg',
    ];

    $(document.createElement('img')).bind('load', function(){
    if(preload[0]) this.src = preload.shift();
     }).trigger('load'); 

  preLoad(gallary); // preload the whole gallary
});

ИЗМЕНИТЬ

preLoad(): эта функция принимает URL-адреса изображений в качестве аргументов, например, preLoad('image_one.jpg', 'image_two.jpg','image_thre.jpg');

Функция preLoad имеет две переменные var imgs и var imageFolder, imgs хранит все URL-адреса изображений, а imageFolder хранит объекты изображений, то есть предварительно загружает загруженные изображения.

person Q_Mlilo    schedule 16.09.2010
comment
Итак, я бы заполнил переменную «галерея» набором изображений в каталоге? Что такое «папка изображений»? Я понимаю, что код ищет папку для изображений и загружает их все. Не могли бы вы примерно объяснить, как работает ваш код? Спасибо - person Thom; 17.09.2010