Предварительная загрузка изображений на jquery?

Question

[Женя]

Добрый день, спасибо за то, что помогаете :)
Делаю фиксированное меню на jquery. При скролле вниз меню должно становится меньше (делаю при помощи addClass();) А также логотип должен менять цвет, соответственно я подгружаю новое изображение attr("src", "../images/logo_nav2.png");

Проблема в том, что когда делаешь скролл изображение не сразу подгружается и появляется вместо него alt="". Разумеется мне это не нравится, как сделать предзагрузку изображения?

Answer 1

[Константин Громов]

Предзагрузка в JS выглядит таким образом:

var image = new Image();

image.src = "image.jpg";

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

new Image().src = "image.jpg";

Для большего удобства можно написать функцию, которая загружает изображения указанные в аргументах:

function preloadImages() {
  for (var i = 0; i < arguments.length; i++) {
    new Image().src = arguments[i];
  }
}

preloadImages(
  "images-1.jpg",
  "images-2.jpg",
  "images-3.jpg"
);

Answer 2

[whatfor]

А может просто оба варианта логотипа засунуть в спрайт и выводить бэкграундом?

Comments

[Женя]

только обычно заказчики любят изменять картинки сами, а спрайтом будет проблематично :] А так отличное решение

Answer 3

[twobomb]

Можно что то типа такого

function loadResources(arr,func){//функция загрузки внешних ресурсов arr - массив ссылок, func - функция которая вызовется после загрузки всех ресурсов
	var loadStatus = false;
		loadStatus = {count: arr.length, loaded: 0, percent: 0};//count - общее количество ресурсов, loaded - сколько загружено ресурсов, percent сколько загружено в процентах
		for(var i = 0; i < arr.length; i++){
			var tmp = new Image();
			tmp.src = arr[i];
			tmp.onload = function(){
				loadStatus.loaded++;
				loadStatus.percent = (loadStatus.loaded * 100)/loadStatus.count;
				if(loadStatus.loaded >= loadStatus.count)
					func();
			}	
	return loadStatus;
}
//Пример
var z = loadResources(["qwerty.png","mycat.jpg"],function(){alert("Все ресурсы загружены!")});
alert("На данный момент загружено "+z.percent+"%");

Answer 4

[Дмитрий Шинкарь]

Для начала включить кэш :D

Вторым этапом - облегчить лого... Посмотреть как все будет отрабатывать. Фича которую тебе скинули наверняка хороша и будет работать, но я так понял что ее надо покупать, верно? А нам бесплатно все подавай! По этому возможно... sawtech.ru

Answer 5

[Игорь]

Подгрузите картинку где-нибудь на странице заранее
<img src="img.gif" style="display:none">
Когда вам она понадобится, она уже будет загружена браузером :)

Comments

[Женя]

да так можно, но можно ли предварительно загрузить картинку средствами javascript \ jquery ?

[Игорь]

function loadImg(img) {
img.forEach(function(src){
var i = new Image();
i.src = src;
});
}
loadImg(['image.jpg', 'image.gif', 'image.png']);

[Игорь]

пардон, форматирование сломалось.

[reifter]

нельзя так делать :) браузеры не грузят то, что в display:none

[Михаил]

reifter: а как насчет других прозрачностей? Или контейнера с нулевыми размерами?