Форум

K_PECT · #1 (**permalink**) 03.01.2016, 16:53

Здравствуйте!
Есть скрипт который запускает функцию после полной загрузки изображений. Изображениям присвоен атрибут hidden, но несмотря на это IE все равно отображает изображения на 1-1,5 секунды.
Помогите реализовать только на js без прописывания изображений в HTML. Заранее спасибо!

<img id="logo_img_1" src="img/logo/1.png" hidden/>
<img id="logo_img_2" src="img/logo/2.png" hidden/>
<img id="logo_img_3" src="img/logo/3.png" hidden/>
<img id="logo_img_4" src="img/logo/4.png" hidden/>
<img id="logo_img_5" src="img/logo/5.png" hidden/>

window.onload = function preload() {
logo_animation() + document.getElementById("logo_img_1").complete + document.getElementById("logo_img_2").complete + document.getElementById("logo_img_3").complete + document.getElementById("logo_img_4").complete + document.getElementById("logo_img_5").complete;
}

рони · #2 (**permalink**) 03.01.2016, 17:18

K_PECT,
css

img{display: none;}

http://javascript.ru/forum/showthread.php?p=265650
Загрузчик картинок

Сообщение от K_PECT

Помогите реализовать

непонятно что реализовать?

K_PECT · #3 (**permalink**) 03.01.2016, 17:57

Спасибо, почитаю))
Вычитал, что если у изображения свойство

img{display: none;}

, то браузер его грузить не будет.

рони · #4 (**permalink**) 03.01.2016, 18:09

Сообщение от K_PECT

, то браузер его грузить не будет.

вы собрались сделать прелоадер, поэтому данный факт не имеет значения.

рони · #5 (**permalink**) 03.01.2016, 19:15

K_PECT,

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

  </style>
  <script>
  	window.onload = function () {
  	  var gallery = document.querySelector('.gallery')
  	  var imgs = gallery.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'];
  	  var callback = function ()
  	  {
  	    gallery.classList.add('show')
  	  };
  	  for (var i = 0, len = imgs.length; i < imgs.length; i++) {
  	    var img = document.createElement('img');
  	    img.onload = img.onerror = (function (a)
  	      {
  	        return function (event) {
  	          imgs[a].src = event && event.type == 'load'? this.src: 'data:image/jpg;base64,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'; //ссылка на фото отстутствует
  	        }
  	      }
  	    )(i);
  	    imgs[i].onload = function ()
  	    {
  	      !--len && callback()
  	    };
  	    img.src = arr_src[i];
  	    img.complete && img.onload()
  	  }
  	}
  </script>
</head>

<body>
<div class="gallery">
<img src="" alt=""  />
<img src="" alt="" />
<img src="" alt="" />
<img src="" alt="" />
<img src="" alt="" />
</div>
</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript