функция 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, время: 15:03. |