Задача: Интерактивная, динамическая подгрузка картинок
Исходник: Интерактивная, динамическая подгрузка картинок, язык: javascript [code #141, hits: 9395]
автор: - [добавлен: 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

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