Задача: Интерактивная, динамическая подгрузка картинок
Исходник: Интерактивная, динамическая подгрузка картинок, язык: javascript [code #141, hits: 9264]
автор: - [добавлен: 22.05.2006] 
  1. <html><head>
  2. <title>Интерактивная загрузка картинок, дефинитивный ответ</title>
  3. <style type="text/css">
  4. .message {
  5.   font-family: Verdana;
  6.   font-size: 12px;
  7.   border: 1px solid black;
  8.   background-color: #eff0f9;
  9.  
  10.   position: absolute;
  11.   width: auto;
  12.   height: auto;
  13. }
  14. </style>
  15. </head>
  16. <body>
  17. <script language="JavaScript" type="text/JavaScript">
  18. /** проверяем есть ли требуемый метод у картинки, если надо устанавливаем */
  19. function checkChangeAPIAvaible(img) {
  20.   if(!img.changeSrc) img.changeSrc=changeSrcH;
  21. }
  22.  
  23. /** реализация метода  changeSrc */
  24. function changeSrcH(src) {
  25.   if(src==null) { //если параметров не было, то покажи предидущую удачно загруженную картинку
  26.     if(this.backSrc) this.src=this.backSrc;
  27.     return;
  28.   }
  29.   if(this.complete) this.backSrc=this.src; //если предидущая картинка была удачно загруженна, то сохрани адрес на случай возврата
  30.   if(!this.tempLoadImage) { //обьект Image который загрузит наш файл
  31.      this.tempLoadImage=new Image();
  32.      this.tempLoadImage.onload=changeSrcOL; //как только картинка загрузится
  33.      this.tempLoadImage.parentImage=this; //ссылка на предка, понадобится в обработчике onload
  34.  
  35.      this.msg=createMessage("Loading...", this); // заморочки, просто сообщение "Loading..."
  36.   }
  37.   this.msg.show();
  38.   this.tempLoadImage.src=src;
  39. }
  40.  
  41. /** обработчик события  onload у картинки, меняем пути предка  */
  42. function changeSrcOL() {
  43.   this.parentImage.src=this.src;
  44.   this.parentImage.msg.hidde();  //скрываем заморочки если использовались =)
  45. }
  46.  
  47.  
  48.  
  49. function testbut(src) {
  50.   var im=document.getElementById("test");
  51.   checkChangeAPIAvaible(im); //проверка что changeSrc существует
  52.   im.changeSrc(src); //собстна юзаем всё что писали выше
  53. }
  54. function getPosition(obj) {
  55.   var x=0, y=0;
  56.   while(obj) {
  57.     x+=obj.offsetLeft;
  58.     y+=obj.offsetTop;
  59.     obj=obj.offsetParent;
  60.   }
  61.   return {x: x, y:y};
  62. }
  63.  
  64. function createMessage(txt, obj) {
  65.   var m=document.createElement("DIV"); //создали
  66.   m.className="message";
  67.   m.innerHTML=txt;
  68.   document.body.appendChild(m);
  69.   if(m.offsetWidth>obj.width) m.style.width=obj.width; //что бы за картинку не вылезло
  70.   return { //возвращаем обьект
  71.     target:m,
  72.     prnt: obj,
  73.     hidde:function(){this.target.style.visibility="hidden";},
  74.     show:function(){
  75.       var pos=getPosition(this.prnt);
  76.       this.target.style.left=pos.x;
  77.       this.target.style.top=pos.y;
  78.       this.target.style.visibility="visible";
  79.     }
  80.   };
  81. }
  82. </script>
  83. Источник тестовой страницы: <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 />
  84. Автор: <a target=_blank href="http://forum.vingrad.ru/index.php?showuser=777&nickname=Sardar">Sardar</a>
  85. <br /><br /><br />
  86. <img id="test" src="sardar.gif" /><br />
  87. <button onclick="testbut('test2.jpg');">Вторая</button><button onclick="testbut('test.gif');">Не существующая</button><button onclick="testbut(null);">Предидущая удачная</button>
  88.  
  89.  
  90.  
  91. </body></html>
Тестировалось на: IE 6.0 SP2, Mozilla FF 1.5, Opera 8.5

+добавить реализацию