функция 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. В нем левый бордер краснеет всегда, а изображение меняется далеко не всегда. Что не так? |
я использую для этой цели другую конструкцию:
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 сек } } |
Цитата:
|
И попутный вопрос по теме)
Чем отличаются записи: 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. |