Предзагрузчик картинок

getalusk · December 30, 2010

С Наступающим вэбмастеры у меня к вам есть вопрос. У меня на ссылке стоит изображение(прописано в стилях), при наведении мышкой на область изображение в стиле меняется, но вот дилема, секунду или 2 оно просто загружается, прям как бельмо на глазу. Я видел здесь такую тему и не забил в закладки и теперь вот не могу найти, форумчане помогите пожалуйста. Спасибо за внимание.

Vlad · December 30, 2010

Можно использовать спрайты (http://htmlbook.ru/metki/sprayty), можно через JS сделать предзагрузку. Можно через стили выводить картинку в начале кода невидимую.

eVErl@Sting · December 30, 2010

Вот с хабра взял:

preloadimg.js

stopPreloadImg = false;
arrayImgCached = new Array();
arrayImg = null;
baseUrl = null;

function preloadImg(preloadArray, baseUrl) {
  this.arrayImg = preloadArray;
  this.baseUrl = baseUrl;

  cacheImage();
}

function safeMemoryInRecursion() {window.setTimeout(cacheImage, 0)}

function cacheImage()
{
  if (arrayImg.length > 0 && stopPreloadImg == false) {
	var img = new Image();
	img.onerror = function(){safeMemoryInRecursion()};
	img.onload = function(){safeMemoryInRecursion()};
  img.src = baseUrl + arrayImg[0];

	arrayImg.shift();
	arrayImgCached[window.arrayImgCached.length] = img;
  }
}

<html>
  <head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  </head>
  <body>
	<h1>Страница с предзагрузкой изображений</h1>
	  <p>содержимого страницы которое может содержать в себе всё что
	  угодно кроме предзагружаемых изображений. Предзагружаемые изображения
	  использоватьб здесь нет смысла тк эти изображения могут загрузиться
	  дважды.</p>

	  <ol>
		<li>Первый раз как используемые на этой странице</li>
		<li>Второй раз как предзагружаемые изображения</li>
	  </ol>

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

	  <script type="text/javascript" src="preloadimg.js"></script>
	  <script type="text/javascript">
	  var srcArray= new Array(
		"/photo_com/650/3257.jpg",
		"/photo_com/650/3298.jpg",
		"/images/404_habra_error.png"
	  );
	  preloadImg(srcArray, "http://asha-city.ru");
	  </script>
  </body>
</html>

getalusk · December 30, 2010

Спсибо, разжевали, буду пробовать проглотить!

eVErl@Sting · December 30, 2010

Тебе для кнопок нужны спрайты! Делаешь одну картинку со всеми видами кнопоки при наведении/нажатии/нормальном состоянии подгружаешь ее бэкграундом и в стилях hover, active, visited, link указываешь бэкграунд с отступами..в общем почитай об этом, это просто) Игры кстати тоже на спрайтах делают, по крайне мере делали, примеры Carmageddon и Quake 2

getalusk · December 30, 2010

)))попробую по разному опыт не помешает, а вот интересно чисто теоретически, можно сделать рисунок который нужно подгрузить где нибудь на сайте спрятать его, например дать размер 1 на 1 его никто и не увидит но он уже загружен, как я понял если развивать эту идею то можно как раз до спрайтов додуматься! Спасибо еще раз!

Vlad · December 30, 2010

Рисунку можно поставить display:none, это его надежно спрячет. Еще вариант: position: absolute: left:-10000px;

Juster · December 30, 2010

Тебе для кнопок нужны спрайты! Делаешь одну картинку со всеми видами кнопоки при наведении/нажатии/нормальном состоянии подгружаешь ее бэкграундом и в стилях hover, active, visited, link указываешь бэкграунд с отступами..в общем почитай об этом, это просто) Игры кстати тоже на спрайтах делают, по крайне мере делали, примеры Carmageddon и Quake 2

я этот метод не пробовал, но звучит как самый лучший

getalusk · December 30, 2010

Сделал все через спрайты, оказалось все так просто)))спасибо за советы.

Sign In

Предзагрузчик картинок

Question

getalusk

Link to comment

Share on other sites

8 answers to this question

Recommended Posts

Vlad

Link to comment

Share on other sites

eVErl@Sting

Link to comment

Share on other sites

getalusk

Link to comment

Share on other sites

eVErl@Sting

Link to comment

Share on other sites

getalusk

Link to comment

Share on other sites

Vlad

Link to comment

Share on other sites

Juster

Link to comment

Share on other sites

getalusk

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information