JS предзагрузка и бекграунд / HTML, JavaScript, VBScript, CSS

ReSQL.ru

Мобильная версия Контакт Правила FAQ Помощь

Гость

Войти | Регистрация | Профиль | Очистить

Новые сообщения | Избранное

Форумы | Пользователи | Статистика | Мод. лог | Поиск

Цитировать

Написать

Автор*:

Ввести пароль для входа

Тема*:

Сообщение

Данное сообщение тематическое

Сообщение содержит картинки или видео 18+

Автор:

ВНИМАНИЕ! На данном подфоруме действуют строгие правила. Удостоверьтесь, что ваше сообщение соответствует им!

Форум или тема закрыты для гостей. Необходима авторизация!

Загрузить последнюю сохраненную версию

Вложение:

Вставить как галерею

Максимальный размер вложений: 4,0 МБ, аудио/видео: 8,0 МБ. Картинки большего размера ужимаются, если возможно.

Введите код, изображенный на картинке. Если код нечитаемый, кликните картинку, чтобы загрузить другой вариант.

Отправляя сообщение, я выражаю свое согласие с правилами форума и принимаю пользовательское соглашение.

Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр

Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / JS предзагрузка и бекграунд

7 сообщений из 7, страница 1 из 1

JS предзагрузка и бекграунд

#34987283

jshelp

Гость

Добрый день,
я несилен в JS'e, с прелоадом разобрался, а вот с задачкой посложнее не получается.
Тыкните в man где можно прочитать.
Суть собственно:
Есть имейджи, в галерее, (предпросмотр) маленькие.
Так вот они грузятся долго, например модем 56к или ещё что.
Хотелось бы вставить картинку предзагрузки в саму область где должна быть картинка (прогресс бар и т.п.) чтобы до полной загрузки картинки она крутилась, ездила и т.п. и как только загрузится сорец, показать его.

Заранее благодарен.

...

Рейтинг:

0 / 0

05.12.2007, 11:00

| Ответить | Цитировать | Написать

JS предзагрузка и бекграунд

#34989415

jshelp

Гость

Вот такое нашел, слегка модифицировал:

ImagePreloader.js

Код: plaintext

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.

function ImagePreloader(images, callback){
   // store the callback
   this.callback = callback;
   // initialize internal state.
   this.nLoaded =  0 ;
   this.nProcessed =  0 ;
   this.aImages = new Array;
   // record the number of images.
   this.nImages = images.length;
   // for each image, call preload()
   for ( var i =  0 ; i < images.length; i++ ){
      this.preload(images[i]);
	}
}

ImagePreloader.prototype.preload = function(image){
   // create new Image object and add to array
   var oImage = new Image;
   this.aImages.push(oImage);
   // set up event handlers for the Image object
   oImage.onload = ImagePreloader.prototype.onload;
   oImage.onerror = ImagePreloader.prototype.onerror;
   oImage.onabort = ImagePreloader.prototype.onabort;
   // assign pointer back to this.
   oImage.oImagePreloader = this;
   oImage.bLoaded = false;
   oImage.name = image;
   // assign the .src property of the Image object
   oImage.src = image;
}

ImagePreloader.prototype.onload = function()
{
   this.bLoaded = true;
   this.oImagePreloader.nLoaded++;
   this.oImagePreloader.callback(this);
}

ImagePreloader.prototype.onerror = function(){
   this.bError = true;
}

ImagePreloader.prototype.onabort = function(){
   this.bAbort = true;
}

и собственно форма:

Код: plaintext

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.

<html>
<head>
<script type="text/javascript" src="ImagePreloader.js"></script>
<script type="text/javascript">
var aImg = ["a.png", "prof.jpg","test.png"];
var ip = null;

function onPreload(succImage){
   var oDiv = document.getElementById("test");
   document.write(document.getElementById("first"))
}
</script>
</head>
<body onLoad="ip = new ImagePreloader(aImg, onPreload);">
   <div id="test"></div>
</body>
</html>

Проблема в том что document.getElementById("test"); возращает нулл, кто что может подсказать?

...

Рейтинг:

0 / 0

05.12.2007, 18:53

| Ответить | Цитировать | Написать

JS предзагрузка и бекграунд

#34995110

jshelp

Гость

Поборол. Результат: Пока загружается картинки, на экране показываются .gif анимашки загрузки, как только изображение полностью загрузится, показывается на экране. Можно добавить чтобы показало все сразу, по желанию. Вот код:

ImageCacher.js

Код: plaintext

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.

var arr = new Array( 0 );
function beginCache(ImageCol,bCode){
	var elements = document.getElementsByTagName('div');
	for(var m= 0 ;m<elements.length;m++){
		if(elements[m].id=="cacheThis")
			arr.push(elements[m]);
	}
	if(arr.length!=ImageCol.length){
		alert("The number of Images ["+ImageCol.length+"] less or more then places to load ["+arr.length+"]");
		return;
	}else{
		for(var i= 0 ;i<arr.length;i++){
			arr[i].innerHTML = bCode;	
		}
		doInit(ImageCol);
	}
}

function doInit(aImg){
	for(var i= 0 ;i<aImg.length;i++){
		doLoad(aImg[i],i);
	}
}
function doLoad(image,id){
	var oImg = new Image();
	oImg.onload = onLoadTrigger;
	oImg.src = image;
}
	
function onLoadTrigger(){
	if(this.complete)
		setImage(this);
}

function setImage(image){
	var oDiv = arr.pop()
	oDiv.innerHTML = "<img src="+image.src+"/>";
}

На страничке:

Код: plaintext

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.

<html>
<head>
<script type="text/javascript" src="ImageCacher.js"></script>
</head>
<body onLoad='beginCache(["1.png","2.png", "3.png"],"<img src=\"load.gif\" />");'>
   <div id="cacheThis">test</div>
   <div id="cacheThis">test</div>
   <div id="cacheThis">test</div>
</body>
</html>

...

Рейтинг:

0 / 0

07.12.2007, 18:18

| Ответить | Цитировать | Написать

JS предзагрузка и бекграунд

#34995209

mrJust

Гость

jshelp <div id="cacheThis">test</div>
<div id="cacheThis">test</div>
<div id="cacheThis">test</div>
id он на то и id что должен быть уникальным.

...

Рейтинг:

0 / 0

07.12.2007, 18:46

| Ответить | Цитировать | Написать

JS предзагрузка и бекграунд

#34995766

jshelp

Гость

У Меня такая ситуация, что в галерее 6 фоток на странице, по div id я загружу во все 6, 6 фоток.
С уникальным ID это каждый раз генерить ИД для каждой фотки? всетаки время как никак.

...

Рейтинг:

0 / 0

08.12.2007, 12:43

| Ответить | Цитировать | Написать

JS предзагрузка и бекграунд

#34995789

apapacy

Участник

Сообщения: 1 276

Рейтинг: 0 / 0

jshelp

Код: plaintext

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.

function onPreload(succImage){
   var oDiv = document.getElementById("test");
   document.write(document.getElementById("first"))
}
</script>
</head>
<body onLoad="ip = new ImagePreloader(aImg, onPreload);">
   <div id="test"></div>
</body>
</html>

Проблема в том что document.getElementById("test"); возращает нулл, кто что может подсказать?

Я думаю, первый раз функция срабатывает. А вот во второй раз не срабатывает. Вы ж затираете весь документ своим document.write(). Делать вывод в документ можно только при первой загрузке страницы. После загрузки любой вывод опустошает документю

...

Рейтинг:

0 / 0

08.12.2007, 13:26

| Ответить | Цитировать | Написать

JS предзагрузка и бекграунд

#34995791

apapacy

Участник

Сообщения: 1 276

Рейтинг: 0 / 0

Кстати насчет ИД предыдущий оратор прав. Должно быть уникальным. Браузер не ругнется, но поместит элементы в массив. Это считается неправильным ходом.

...

Рейтинг:

0 / 0

08.12.2007, 13:30

| Ответить | Цитировать | Написать

7 сообщений из 7, страница 1 из 1

Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / JS предзагрузка и бекграунд

Читали тему (0):

Читали форум (0):

Пользователи онлайн (0):

start [/forum/topic.php?fid=22&gotonew=1&tid=1457239]:	0ms
get settings:	10ms
get forum list:	14ms
check forum access:	4ms
check topic access:	4ms
track hit:	38ms
get topic data:	14ms
get first new msg:	6ms
get forum data:	2ms
get page messages:	48ms
get tp. blocked users:	2ms
others:	227ms

total:	369ms