Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / JS предзагрузка и бекграунд / 7 сообщений из 7, страница 1 из 1
05.12.2007, 11:00
    #34987283
jshelp
jshelp
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
JS предзагрузка и бекграунд
Добрый день,
я несилен в JS'e, с прелоадом разобрался, а вот с задачкой посложнее не получается.
Тыкните в man где можно прочитать.
Суть собственно:
Есть имейджи, в галерее, (предпросмотр) маленькие.
Так вот они грузятся долго, например модем 56к или ещё что.
Хотелось бы вставить картинку предзагрузки в саму область где должна быть картинка (прогресс бар и т.п.) чтобы до полной загрузки картинки она крутилась, ездила и т.п. и как только загрузится сорец, показать его.

Заранее благодарен.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
05.12.2007, 18:53
    #34989415
jshelp
jshelp
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
JS предзагрузка и бекграунд
Вот такое нашел, слегка модифицировал:

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
| Ответить | Цитировать | Написать  
07.12.2007, 18:18
    #34995110
jshelp
jshelp
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
JS предзагрузка и бекграунд
Поборол. Результат: Пока загружается картинки, на экране показываются .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:46
    #34995209
mrJust
mrJust
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
JS предзагрузка и бекграунд
jshelp <div id="cacheThis">test</div>
<div id="cacheThis">test</div>
<div id="cacheThis">test</div>
id он на то и id что должен быть уникальным.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
08.12.2007, 12:43
    #34995766
jshelp
jshelp
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
JS предзагрузка и бекграунд
У Меня такая ситуация, что в галерее 6 фоток на странице, по div id я загружу во все 6, 6 фоток.
С уникальным ID это каждый раз генерить ИД для каждой фотки? всетаки время как никак.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
08.12.2007, 13:26
    #34995789
apapacy
apapacy
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
JS предзагрузка и бекграунд
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:30
    #34995791
apapacy
apapacy
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
JS предзагрузка и бекграунд
Кстати насчет ИД предыдущий оратор прав. Должно быть уникальным. Браузер не ругнется, но поместит элементы в массив. Это считается неправильным ходом.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / JS предзагрузка и бекграунд / 7 сообщений из 7, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение
созд. / загр.: 166ms
Закрыть
start [/forum/topic.php?fid=22&mobile=1&tid=1457239]:
 0ms
get settings:
 10ms
get forum list:
 13ms
check forum access:
 4ms
check topic access:
 4ms
track hit:
 69ms
get topic data:
 11ms
get forum data:
 2ms
get page messages:
 40ms
get tp. blocked users:
 2ms
others: 11ms
total:  166ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]