<html><head>
<title>Интерактивная загрузка картинок, дефинитивный ответ</title>
<style type="text/css">
.message {
font-family: Verdana;
font-size: 12px;
border: 1px solid black;
background-color: #eff0f9;
position: absolute;
width: auto;
height: auto;
}
</style>
</head>
<body>
<script language="JavaScript" type="text/JavaScript">
/** проверяем есть ли требуемый метод у картинки, если надо устанавливаем */
function checkChangeAPIAvaible(img) {
if(!img.changeSrc) img.changeSrc=changeSrcH;
}
/** реализация метода changeSrc */
function changeSrcH(src) {
if(src==null) { //если параметров не было, то покажи предидущую удачно загруженную картинку
if(this.backSrc) this.src=this.backSrc;
return;
}
if(this.complete) this.backSrc=this.src; //если предидущая картинка была удачно загруженна, то сохрани адрес на случай возврата
if(!this.tempLoadImage) { //обьект Image который загрузит наш файл
this.tempLoadImage=new Image();
this.tempLoadImage.onload=changeSrcOL; //как только картинка загрузится
this.tempLoadImage.parentImage=this; //ссылка на предка, понадобится в обработчике onload
this.msg=createMessage("Loading...", this); // заморочки, просто сообщение "Loading..."
}
this.msg.show();
this.tempLoadImage.src=src;
}
/** обработчик события onload у картинки, меняем пути предка */
function changeSrcOL() {
this.parentImage.src=this.src;
this.parentImage.msg.hidde(); //скрываем заморочки если использовались =)
}
function testbut(src) {
var im=document.getElementById("test");
checkChangeAPIAvaible(im); //проверка что changeSrc существует
im.changeSrc(src); //собстна юзаем всё что писали выше
}
function getPosition(obj) {
var x=0, y=0;
while(obj) {
x+=obj.offsetLeft;
y+=obj.offsetTop;
obj=obj.offsetParent;
}
return {x: x, y:y};
}
function createMessage(txt, obj) {
var m=document.createElement("DIV"); //создали
m.className="message";
m.innerHTML=txt;
document.body.appendChild(m);
if(m.offsetWidth>obj.width) m.style.width=obj.width; //что бы за картинку не вылезло
return { //возвращаем обьект
target:m,
prnt: obj,
hidde:function(){this.target.style.visibility="hidden";},
show:function(){
var pos=getPosition(this.prnt);
this.target.style.left=pos.x;
this.target.style.top=pos.y;
this.target.style.visibility="visible";
}
};
}
</script>
Источник тестовой страницы: <a target=_blank href="http://forum.vingrad.ru/index.php?showtopic=47159&unread=1&st=15&#entry449084">http://forum.vingrad.ru/index.php?showtopic=47159&unread=1&st=15&#entry449084</a><br /><br />
Автор: <a target=_blank href="http://forum.vingrad.ru/index.php?showuser=777&nickname=Sardar">Sardar</a>
<br /><br /><br />
<img id="test" src="sardar.gif" /><br />
<button onclick="testbut('test2.jpg');">Вторая</button><button onclick="testbut('test.gif');">Не существующая</button><button onclick="testbut(null);">Предидущая удачная</button>
</body></html>
