圖像加載時加載圖標

Question

如何編寫頁面上的圖像加載時出現的加載圖標或圖形。 一個例子是http://landerapp.com/ ？

我的目標是阻止用戶在屏幕上看到這些圖像，直到他們准備好制作動畫（請參閱http://tsawebmaster1.hhstsa.com/index.html上的問題）。

Answer 1

讓我們從一個可見的加載圖像開始，該圖像固定在屏幕的正中間。 然后，當頁面完全加載時，我們將在<body>上添加一個"page_loaded"類：

[1]開始淡出加載圖像

[2]開始將屏幕外圖像淡入和轉換到屏幕

 window.onload = function() { document.body.classList.add("page_loaded"); }

 .loader { opacity: 1; transition: 2s opacity; height: 300px; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); } .right, .left { height: 100px; position: absolute; transition: 1s 2s; opacity: 0; } .left { left: 0; transform: translateX(-50em); } .right { right: 0; transform: translateX(50em); } .page_loaded .loader { opacity: 0; } .page_loaded .right, .page_loaded .left { opacity: 1; transform: translateX(0); }

 <img class="loader" src="https://d13yacurqjgara.cloudfront.net/users/82092/screenshots/1073359/spinner.gif" alt="" /> <img src="https://www.petfinder.com/wp-content/uploads/2012/11/140272627-grooming-needs-senior-cat-632x475.jpg" alt="" class="right" /> <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTS704tVMgbKCry10AhT09VE8wBY5S9v-PWxTBOa7o52JU0TsjH" alt="" class="left" />

Answer 2

如果您正在使用Vanilla或jQuery我建議您使用imagesLoaded ，這意味着要實現您想要的。

我會用這樣的東西：

 $(function(){ $('.img-container img').imagesLoaded().done(function(){ console.log('images loaded'); $('.img-container .loader').remove(); $('.img-container img.hide').removeClass('hide'); }).fail(function(){ console.log('FAILED TO LOAD IMAGES'); }); });

 .img-responsive { max-width : 100%; } .hide { display : none; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/3.2.0/imagesloaded.pkgd.min.js"></script> <div class="img-container"> <div class="loader"> Loading image.... </div> <img src="http://mascotafiel.com/wp-content/uploads/2015/10/perros-Husky-Siberiano_opt-compressor-1.jpg" alt="PrettyCoolImage" class="img-responsive hide"> </div>

圖像加載時加載圖標

問題描述

2 個解決方案

解決方案1
0 2016-05-16 02:29:18

解決方案2
0 2016-05-16 04:35:09

圖像加載時加載圖標

問題描述

2 個解決方案

解決方案1 0 2016-05-16 02:29:18

解決方案2 0 2016-05-16 04:35:09

解決方案1
0 2016-05-16 02:29:18

解決方案2
0 2016-05-16 04:35:09