Фоновая загрузка изображений

@prudkiy · Регистрация: 21.07.2013

Студворк — интернет-сервис помощи студентам

Всем доброго ) У меня вот такая проблема. Уже сделал простую галерею изобр.
Система такая - нажимаю на иконку, запускается галерея и листаешь изобр. соотв этой иконке. В каждом "блоке" есть по 5 изобр., но хрень в том что при первом проходе браузрер каждый раз загружает изобр. Хотел бы чтоб при клике по блоку браузер фоново загружал себе все соотв. изобр
Вроде ясно объяснил )
Пробовал вот так -

JavaScript
1
2
3
window.onload = function(){
for(x=1; x<(colImg-1); x++)document.location.href = "images/gallery/"+katalog+"/slide_"+x+".jpg"
};

в переменных :
colImg - кол. изобр. в блоке
katalog - имя каталога
x - перебор всех изобр. в блоке

Но вот так не работает, изобр. в галереи при первом проходе все равно противно моргают ( Помогите

@kserksys · 09.04.2015, 03:42

Изображения попадают в кэш браузера если их объявить через конструктор new Image()

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
var galery = [
        'image1.png',
        'image2.png',
        'image3.png',
        'image4.png',
        'image5.png'
]
 
galery.forEach(function(src){
var image = new Image();
    image.src = src;
    image.className = 'myImage';
    image.style.display = 'none';
    document.body.appendChild(image)
})
var myImage = document.getElementsByClassName('myImage');
var i = 0;
document.body.onclick = function(){
    myImage[i].style.display = 'block';
    if(i>myImage.length-1){i = 0;}
    i++;
}

Создал изображения, присоединил их к телу документа, а потом скрыл, а когда надо, просто показал.

@kalabuni · 09.04.2015, 10:26

html-вариант: cамым первым тегом после <body> прописываете <div style="display: none"></div> и внутрь его помещаете нужное количество тегов <img>, которым в src указываете пути к файлам, которые надо предзагрузить

css-вариант: в сss-файле или в блоке <style></style> прописываете нужное количество классов, каждому из которых прописываете фоны в виде путей к файлам, которые надо предзагрузить -- и эти классы нигде в коде не используйте

js-вариант: в js-файле или в блоке <script></script> создаёте нужное количество объектов Image (), каждому из которых устанавливаете src в виде путей к файлам, которые надо предзагрузить -- и делать это надо не по onload, а сразу

Добавлено через 6 минут
PS. но предзагрузка - это не панацея, т.е. она необходима, но недостаточна
даже если файл имеется в кеше, браузер при попытке отображения этого файла по-любому отсылает http-запрос на сервер и получает от сервера http-заголовок этого файла, после получения ответа от сервера браузер сравнивает размер и дату последнего изменения с тем, что имеется в кеше и только потом, если эти данные совпали, берёт файл из кеша
на все эти "отсылку запроса, ожидание ответа и сравнение" всё-равно требуется время

если нужно реально мгновенная замена картинки на картинку, тут надо пользоваться методом replaceChild () и заменять существующее изображение на новое созданное заранее

@prudkiy · 09.04.2015, 10:49 **[ТС]**

kalabuni повторюсь - это галерея и заведомо знать изображения которые будут просматр. Я не могу, их много.

@kalabuni · 09.04.2015, 11:16

ишшо раз:
"простая галерея" - это страница, на которой расположено определённое (конечное) количество тегов <img>, которые отображают так называемые "превьюшки" (картинки малого размера)
при клике по какой-либо из "превьюшек" пользователь видит эту же картинку, но уже большого размера

именно это называется простой галереей

если у вас что-то "листается", есть какие-то иконки/блоки, то это уже не галерея, а что-то иное - слайдер, карусель и прочее...

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

но это уже не "простая галерея"

@prudkiy · 09.04.2015, 20:06 **[ТС]**

kalabuni может и не простое, ХЗ. Есть 9 иконок, по нажатию на ее срабатывает "галерея", в ней можно просмотреть изобр. принадлежащие этому блоку(иконке). Скрипт js просто меняет путь к изображению. Вот в момент когда нажимаешь на иконку то скрипт знает пути ко всем изображениям, но как сделать чтоб браузер их так же знал и сразу подгружал? как-то так.

Новые блоги и статьи Все статьи Все блоги /
Программная установка даты и запрет ее изменения Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: при создании документов установить период списания автоматически. . .	Вывод данных через динамический список в справочнике Maks 01.04.2026 Реализация из решения ниже выполнена на примере нетипового справочника "Спецтехника" разработанного в конфигурации КА2. Задача: вывести данные из ТЧ нетипового документа. . .	Функция заполнения текстового поля в реквизите формы документа Maks 01.04.2026 Алгоритм из решения ниже реализован на нетиповом документе "ВыдачаОборудованияНаСпецтехнику" разработанного в конфигурации КА2, в дополнении к предыдущему решению. На форме документа создается. . .	К слову об оптимизации kumehtar 01.04.2026 Вспоминаю начало 2000-х, университет, когда я писал на Delphi. Тогда среди программистов на форумах активно обсуждали аккуратную работу с памятью: нужно было следить за переменными, вовремя. . .
Идея фильтра интернета (сервер = слой+фильтр). Hrethgir 31.03.2026 Суть идеи заключается в том, чтобы запустить свой сервер, о чём я если честно мечтал давно и давно приобрёл книгу как это сделать. Но не было причин его запускать. Очумелые учёные напечатали на. . .	Модель здравосоХранения 6. ESG-повестка и устойчивое развитие; углублённый анализ кадрового бренда anaschu 31.03.2026 В прикрепленном документе раздумья о том, как можно поменять модель в будущем	10 пpимет, которые всегда сбываются Maks 31.03.2026 1. Чтобы, наконец, пришла маршрутка, надо закурить. Если сигарета последняя, маршрутка придет еще до второй затяжки даже вопреки расписанию. 2. Нaдоели зима и снег? Не надо переезжать. Достаточно. . .	Перемещение выделенных строк ТЧ из одного документа в другой Maks 31.03.2026 Реализация из решения ниже выполнена на примере нетипового документа "ВыдачаОборудованияНаСпецтехнику" с единственной табличной частью "ОборудованиеИКомплектующие" разработанного в конфигурации КА2. . . .

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,629
	09.04.2015, 10:26
	html-вариант: cамым первым тегом после <body> прописываете <div style="display: none"></div> и внутрь его помещаете нужное количество тегов <img>, которым в src указываете пути к файлам, которые надо предзагрузить css-вариант: в сss-файле или в блоке <style></style> прописываете нужное количество классов, каждому из которых прописываете фоны в виде путей к файлам, которые надо предзагрузить -- и эти классы нигде в коде не используйте js-вариант: в js-файле или в блоке <script></script> создаёте нужное количество объектов Image (), каждому из которых устанавливаете src в виде путей к файлам, которые надо предзагрузить -- и делать это надо не по onload, а сразу Добавлено через 6 минут PS. но предзагрузка - это не панацея, т.е. она необходима, но недостаточна даже если файл имеется в кеше, браузер при попытке отображения этого файла по-любому отсылает http-запрос на сервер и получает от сервера http-заголовок этого файла, после получения ответа от сервера браузер сравнивает размер и дату последнего изменения с тем, что имеется в кеше и только потом, если эти данные совпали, берёт файл из кеша на все эти "отсылку запроса, ожидание ответа и сравнение" всё-равно требуется время если нужно реально мгновенная замена картинки на картинку, тут надо пользоваться методом replaceChild () и заменять существующее изображение на новое созданное заранее 1

@prudkiy 181 / 149 / 55 Регистрация: 21.07.2013 Сообщений: 958
	09.04.2015, 10:49 [ТС]
	kalabuni повторюсь - это галерея и заведомо знать изображения которые будут просматр. Я не могу, их много. 0

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,629
	09.04.2015, 11:16
	ишшо раз: "простая галерея" - это страница, на которой расположено определённое (конечное) количество тегов <img>, которые отображают так называемые "превьюшки" (картинки малого размера) при клике по какой-либо из "превьюшек" пользователь видит эту же картинку, но уже большого размера именно это называется простой галереей если у вас что-то "листается", есть какие-то иконки/блоки, то это уже не галерея, а что-то иное - слайдер, карусель и прочее... так вот, к сути: в простой галерее количество превьюшек на странице ограничено конечным числом, нельзя называть это число словом "много" пусть их 50 штук, предзагружать все 50 действительно нерационально, просто не успеют все 50 загрузиться к моменту, когда юзер по любой из 50-ти кликнет для этого и существуют всякие-разные способы "направить клиента", чтобы он как бы сделал свободный выбор, а на самом деле вы его туда направили но это уже не "простая галерея" 0

@prudkiy 181 / 149 / 55 Регистрация: 21.07.2013 Сообщений: 958
	09.04.2015, 20:06 [ТС]
	kalabuni может и не простое, ХЗ. Есть 9 иконок, по нажатию на ее срабатывает "галерея", в ней можно просмотреть изобр. принадлежащие этому блоку(иконке). Скрипт js просто меняет путь к изображению. Вот в момент когда нажимаешь на иконку то скрипт знает пути ко всем изображениям, но как сделать чтоб браузер их так же знал и сразу подгружал? как-то так. 0