Как ускорить подгрузку скрипта?

SergejF · 15.03.2012, 12:57

Ситуация: статичный html-сайт. С помощью скрипта небольшие картинки на страницах при клике на них "разворачиваются" в полноразмерное изображение. Выполнено это с помощью скриптов http://ajax.googleapis.com/ajax/libs.../jquery.min.js , zoom.js у меня на сервере и нескольких "связок из двух jpg-файлов, маленького и большого. Вот таким образом:

Код:

<head>
...
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="zoom/zoom.js"></script>
...
</head>
...
<a href="images/about1.jpg" class="zoom"><img border="1" src="images/about11.jpg" width="250" height="188"></a>
<a href="images/about2.jpg" class="zoom"><img border="1" src="images/about22.jpg" width="250" height="188"></a>
<a href="images/about3.jpg" class="zoom"><img border="1" src="images/about33.jpg" width="250" height="188"></a>
...

Скрипт jquery.min.js размером 80 KB и большие файлы начинают загружаться при клике. Из-за этого происходит некоторая задержка, изображение начинает разворачиваться не сразу. Можно ли сделать так, чтобы скрипт и файлы загружались при загрузке страницы, не дожидаясь клика пользователя?

ahsinis · 15.03.2012, 14:50

не знаю как на jquery это сделать, на обычном javascript это делается так

Код:

var img = new Image();
img.src = 'URL';

Вот тут на вскидку подробнее
http://www.internet-technologies.ru/...ticle_835.html

MonAmur · 15.03.2012, 15:24

Цитата:

Сообщение от SergejF

Скрипт jquery.min.js размером 80 KB и большие файлы начинают загружаться при клике. Из-за этого происходит некоторая задержка, изображение начинает разворачиваться не сразу. Можно ли сделать так, чтобы скрипт и файлы загружались при загрузке страницы, не дожидаясь клика пользователя?

этот скрипт загружается непосредственно при загрузке кода страницы, а не при клике.
Вам нужно прелоадер картинок.

пример (коды размещать в самом низу страницы):

Код HTML:

<script type="text/javascript" src="imagepre.js"></script>

в нем код:

Код HTML:

function preloadImages(imgs){
	
	var picArr = [];
	
		for (i = 0; i<imgs.length; i++){
			
				picArr[i]= new Image(100,100); 
				picArr[i].src=imgs[i]; 

			
			}
	
	}

Код HTML:

  <script type="text/javascript">
		preloadImages([
			'images/1.gif',
			'images/2.gif',
			'images/3.gif',
бла-бла-бла........
			'images/wrapper_pic-act.png',
			'images/wrapper_pic_border.gif',
			'images/wrapper_pic_border-act.gif',
			'images/wrapper_pic_border-b.gif']);
	</script>

SergejF · 15.03.2012, 19:48

Цитата:

Сообщение от MonAmur

этот скрипт загружается непосредственно при загрузке кода страницы, а не при клике.

Спасибо, буду знать. Значит задержку вызывает не загрузка скрипта, а загрузка больших изображений.

Цитата:

Сообщение от MonAmur

Вам нужно прелоадер картинок.

И за это поклон!

Добавлено через 3 часа 8 минут
Что-то я, наверно не так делаю. MonAmur, проверьте порядок, пожалуйста:

На html странице перед </body> вставил код:

Код:

 
<script type="text/javascript" src="imagepre.js"></script>	
<script type="text/javascript">
		preloadImages([
			'images/about1.jpg',
			'images/about2.jpg']);
</script>

Создал файл imagepre.js, вставил в него код:

Код:

function preloadImages(imgs){
	
	var picArr = [];
	
		for (i = 0; i<imgs.length; i++){
			
				picArr[i]= new Image(100,100); 
				picArr[i].src=imgs[i]; 

			
			}
	
	}

Закачал страницу и imagepre.js на сервер.

Открываю страницу в браузере. Дожидаюсь пока потухнет значок связи с Интернет. Страничка закачивается быстро, изображения явно не догружаются. Кликаю по ссылке на изображения about1.jpg, about1.jpg и только тогда происходит их загрузка.

Что делаю неправильно?

MonAmur · 15.03.2012, 19:54

SergejF, а картинки находятся тут - сайт.ру/images/about1.jpg ?

пришлите урл страницы в личку. гляну.

SergejF · 15.03.2012, 20:27

Цитата:

Сообщение от MonAmur

а картинки находятся тут - сайт.ру/images/about1.jpg ?

Да. Линк отправил в личку.

Wink · 15.03.2012, 22:06

Если jquery используется только для "разворачивания" картинок, есть смысл вместо него использовать highslide, который в упакованном виде весит 25 Кб. Там сразу есть и предварительная загрузка картинок и подгон размеров картинки к разеру окна браузера и еще куча возможностей.

SergejF · 16.03.2012, 00:54

Цитата:

Сообщение от Wink

есть смысл вместо него использовать highslide

Спасибо, Wink. Работает.

15.03.2012, 12:57	#1
SergejF Эксперт Регистрация: 17.02.2008 Адрес: Донецк, ДНР Сообщений: 8,880 Вес репутации: 503	Как ускорить подгрузку скрипта? Ситуация: статичный html-сайт. С помощью скрипта небольшие картинки на страницах при клике на них "разворачиваются" в полноразмерное изображение. Выполнено это с помощью скриптов http://ajax.googleapis.com/ajax/libs.../jquery.min.js , zoom.js у меня на сервере и нескольких "связок из двух jpg-файлов, маленького и большого. Вот таким образом: Код: <head> ... <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> <script type="text/javascript" src="zoom/zoom.js"></script> ... </head> ... <a href="images/about1.jpg" class="zoom"><img border="1" src="images/about11.jpg" width="250" height="188"></a> <a href="images/about2.jpg" class="zoom"><img border="1" src="images/about22.jpg" width="250" height="188"></a> <a href="images/about3.jpg" class="zoom"><img border="1" src="images/about33.jpg" width="250" height="188"></a> ... Скрипт jquery.min.js размером 80 KB и большие файлы начинают загружаться при клике. Из-за этого происходит некоторая задержка, изображение начинает разворачиваться не сразу. Можно ли сделать так, чтобы скрипт и файлы загружались при загрузке страницы, не дожидаясь клика пользователя?

15.03.2012, 14:50	#2
ahsinis Мастер Регистрация: 17.03.2008 Сообщений: 638 Вес репутации: 237	не знаю как на jquery это сделать, на обычном javascript это делается так Код: var img = new Image(); img.src = 'URL'; Вот тут на вскидку подробнее http://www.internet-technologies.ru/...ticle_835.html

15.03.2012, 19:54	#5
MonAmur Эксперт Регистрация: 03.07.2007 Адрес: Chinatown Сообщений: 7,265 Вес репутации: 609	SergejF, а картинки находятся тут - сайт.ру/images/about1.jpg ? пришлите урл страницы в личку. гляну. __________________ отличная тизерка тексты по 10 руб/кзнак автоматизируй все, не мучайся!

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Как ускорить индексацию в Яше?	Никиш	Яндекс	28	24.12.2010 17:37
Как ускорить индексацию?	la2er	Вопросы от новичков	28	17.09.2010 16:00
Как ускорить вывод?	Sudba	Финансовые и юридические вопросы	8	08.04.2010 14:44
ускорить вывод средст	viy	Финансовые и юридические вопросы	2	17.07.2009 16:03
Как ускорить размещение ссылок	firmabos2003	Вопросы по работе системы	4	06.06.2009 16:20

15.03.2012, 22:06	#7
Wink Злой модератор Регистрация: 25.03.2007 Адрес: Deep forest Сообщений: 5,343 Вес репутации: 503	Если jquery используется только для "разворачивания" картинок, есть смысл вместо него использовать highslide, который в упакованном виде весит 25 Кб. Там сразу есть и предварительная загрузка картинок и подгон размеров картинки к разеру окна браузера и еще куча возможностей.