Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   функция imgLoader (https://javascript.ru/forum/events/33446-funkciya-imgloader.html)

land15 23.11.2012 16:26

функция imgLoader
 
функция для подгрузки превьюшек, пока грузится - показывается картинка загрузки, после загрузки - нужное изображение:
function imgLoader (el, blankPic, aimSrc, errorSrc) {
	    var aimPic = new Image(),
		    elt = el;
		
		aimPic.onload = function () {
		    elt.src = aimPic.src;		
		    elt.style.borderLeft = '1px solid red';//отладочная строка
        }
				
		aimPic.onerror = function() {
		    elt.src = errorSrc;
	    }
		
	        aimPic.src = aimSrc;
		    elt.width = imgSize.Width;//эти размеры известны
		    elt.height = imgSize.Height;
	        elt.src = blankPic.src;
}

Везде работает, кроме IE. В нем левый бордер краснеет всегда, а изображение меняется далеко не всегда. Что не так?

bushstas 21.12.2012 13:53

я использую для этой цели другую конструкцию:
var img=new Image()
img.src="path/pic.jpg"
checkPicLoad(img)

function checkPicLoad(img){
if(img.complete){

//фото загружено, делай действия 

}else{
window.setTimeout(function(){checkPicLoad(img)},200)
// фото еще не загружено, проверь снова через 0.2 сек  

}

}

Дмитрий 87 31.12.2012 17:03

Цитата:

Сообщение от bushstas (Сообщение 222754)
я использую для этой цели другую конструкцию:
var img=new Image()
img.src="path/pic.jpg"
checkPicLoad(img)

function checkPicLoad(img){
if(img.complete){

//фото загружено, делай действия 

}else{
window.setTimeout(function(){checkPicLoad(img)},200)
// фото еще не загружено, проверь снова через 0.2 сек  

}

}

А если такой картинки не существует? Подвисон?

Дмитрий 87 31.12.2012 17:33

И попутный вопрос по теме)
Чем отличаются записи:
ShowImg.onload= function(){alert("The Image is not loaded! Sorry...")}

И:
ShowImg.onload= alert("The Image is not loaded! Sorry...")


Вот сам скрипт смены изображений:
var ImgArr= document.getElementById("preload").getElementsByTagName("img")
	var ShowImg= document.getElementById("mainimg")
	var CurImg= 0
	function nextimg(){
		if (CurImg<ImgArr.length-1){
			CurImg+= 1
			ShowImg.src= ImgArr[CurImg].src}
		else{
			CurImg= 0
			ShowImg.src= ImgArr[CurImg].src}
	}
	function prewimg(){
		if (CurImg !== 0){
			CurImg-= 1
			ShowImg.src= ImgArr[CurImg].src}
		else{
			CurImg= ImgArr.length-1
			ShowImg.src= ImgArr[CurImg].src}
	}
	function blockkeydown(event){
		if (event.keyCode== 37){nextimg()}
		if (event.keyCode== 39){prewimg()}
	}
	function load(){
		ShowImg.src= ImgArr[CurImg].src
	}
	ShowImg.onerror= function(){alert("The image is not loaded! Sorry...")}
	document.onload= load()


Если убрать function(){...} то сразу при загрузке страницы алерт! Если в таком виде, то всё вроде норм (грузится изображение, если его нет то алерт).
А вот если событие ОНЕРРОР поместить в функцию (например function prewimg()) то там такие чудеса творятся!
Допустим поставить событие ОНЛОАД куда-нибудь в функцию function nextimg(). По наблюдениям после ОНЛОАД код пойдёт выполняться дальше, функция завершится и событие онлоад попросту не случится!
На сайте даже есть пример:
http://learn.javascript.ru/play/tuto...oad/index.html

Взятый из статьи:
http://learn.javascript.ru/onload-onerror

Перейдите туда и уберите ДЕМО СЧЁТЧИК (
setTimeout(replaceImg, 1000); // задержка на 1 сек для демонстрации

)! Функция не выполнится!
Спрашивается, как по человечески реализовать функцию проверки изображений?


Часовой пояс GMT +3, время: 06:31.