Прелодер картинки на JS

[inet_boy]

Добрый день али ночь!

Подскажите как вывести анимированную картнку к примеру load.gif поверх загружаемой картинки, пока она загружается с сервера.

к примеру есть код:

<div class="gallery">
<img src="img/image_1.jpg" alt="" />
<img src="img/image_2.jpg" alt="" />
<img src="img/image_3.jpg" alt="" />
<img src="img/image_4.jpg" alt="" />
</div>

подскажите как реализовать, заранее спасибо за ответы

[kostyanet]

Так не делают. Картинку надо грузить в объект new Image и по load повторять выбирая из массива. Когда массив кончится можете выкинуть свои часики и воткнуть любой src, он уже в кеше.

[inet_boy]

отлично, а как это рализовать ?
* знал бы уже давно сделал, за этим и пришол что не знаю как

[рони]

inet_boy, из учебника ...

Создайте функцию preloadImages(sources, callback), которая предзагружает изображения из массива ...

http://learn.javascript.ru/onload-onerror
да и на самом форуме есть поиск

[inet_boy]

парни, я понимаю что все умные, я прошу помощи в простой валидной реализации так как с JS не знаком

[krasovsky]

парни, я понимаю что все умные, я прошу помощи в простой валидной реализации так как с JS не знаком

Ну если уж ты начал, то стоит познакомиться.

//допустим у нас есть картинка
var imgpath = '/img/mypic.png';//это путь к ней
var img = new Image();//создаем новый img
img.src = imgpath 
img.onload = function() {//вешаем событие на загрузку картинки
alert('картинка загружена'); // алерт вызывается когда картинка загрузилась, вместо него любой код который тебе нужен,вставка например этой картинки в твою галлерею
}

Примерно так

[рони]

inet_boy,

<!DOCTYPE HTML>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .gallery img{
    width: 150px;
    height: 100px;
  }

  </style>
  <script>
window.onload = function () {
     var imgs = document.querySelectorAll('.gallery img');
     var arr_src = ['http://www.anypics.ru/pic/201302/1366x768/anypics.ru-59453.jpg',
     'http://www.wall-papers.ru/main.php?g2_view=core.DownloadItem&g2_itemId=38417&g2_serialNumber=3',
     'http://w7t.ru/zooms/7da1/7/6168262b44.jpg',
     'http://imgs.mi9.com/uploads/cartoon/4834/disney-cartoon-wallpaper_1366x768_88837.jpg',
     'http://biskvitka.net/uploads/posts/2011-05/thumbs/1306582219_12.jpg'];
     for (var i = 0; i < imgs.length; i++) {
         var img = document.createElement('img');
         img.onload = (function (a) {
             return function () {
                 imgs[a].src = this.src
             }
         })(i);
         img.src = arr_src[i];
         img.complete && img.onload()
     }
 }
  </script>
</head>

<body>
<div class="gallery">
<img src="http://ozemanage.com/images/loading.gif" alt="" />
<img src="http://ozemanage.com/images/loading.gif" alt="" />
<img src="http://ozemanage.com/images/loading.gif" alt="" />
<img src="http://ozemanage.com/images/loading.gif" alt="" />
<img src="http://ozemanage.com/images/loading.gif" alt="" />
</div>
</body>
</html>

[inet_boy]

спасибо рони, данный код рабочий, но он не очень полезен со стороны SEO

[рони]

inet_boy,
Загрузка картинки лучшего качества по клику