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

@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 просто меняет путь к изображению. Вот в момент когда нажимаешь на иконку то скрипт знает пути ко всем изображениям, но как сделать чтоб браузер их так же знал и сразу подгружал? как-то так.

Новые блоги и статьи Все статьи Все блоги /
Мысли в слух. Про "навсегда". kumehtar 16.04.2026 Подумалось тут, что наверное очень глупо использовать во всяких своих установках понятие "навсегда". Это очень сильное понятие, и я только начинаю понимать край его смысла, не смотря на то что давно. . .	My Business CRM MaGz GoLd 16.04.2026 Всем привет, недавно возникла потребность создать CRM, для личных нужд. Собственно программа предоставляет из себя базу данных клиентов, в которой можно фиксировать звонки, стадии сделки, а также. . .	Знаешь почему 90% людей редко бывают счастливыми? kumehtar 14.04.2026 Потому что они ждут. Ждут выходных, ждут отпуска, ждут удачного момента. . . а удачный момент так и не приходит.	Фиксация колонок в отчете СКД Maks 14.04.2026 Фиксация колонок в СКД отчета типа Таблица. Задача: зафиксировать три левых колонки в отчете. Процедура ПриКомпоновкеРезультата(ДокументРезультат, ДанныеРасшифровки, СтандартнаяОбработка) / / . . .
Настройки VS Code Loafer 13.04.2026 { "cmake. configureOnOpen": false, "diffEditor. ignoreTrimWhitespace": true, "editor. guides. bracketPairs": "active", "extensions. ignoreRecommendations": true, . . .	Оптимизация кода на разграничение прав доступа к элементам формы Maks 13.04.2026 Алгоритм из решения ниже реализован на нетиповом документе, разработанного в конфигурации КА2. Задачи, как таковой, поставлено не было, проделанное ниже исключительно моя инициатива. Было так:. . .	Контроль заполнения и очистка дат в зависимости от значения перечислений Maks 12.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: реализовать контроль корректности заполнения дат назначения. . .	Архитектура слоя интернета для сервера-слоя. Hrethgir 11.04.2026 В продолжение https:/ / www. cyberforum. ru/ blogs/ 223907/ 10860. html Знаешь что я подумал? Раз мы все источники пишем в голове ветки, то ничего не мешает добавить в голову такой источник, который сам. . .

@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

Опции темы