圖片加載時加載圖標

如何加載頁面上圖像時加載圖標或圖形？一個例子是http://landerapp.com/？圖片加載時加載圖標

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

2016-05-16 Etan Ginsberg

讓我們從一個固定在屏幕中間的可見加載圖像開始。然後，當頁面完全加載，我們會在其上<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" />

來源

2016-05-16 02:29:18

如果您正在使用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>

來源

2016-05-16 04:35:09

圖片加載時加載圖標

回答

相關問題