Wie würde ich ein Ladesymbol oder eine Grafik programmieren, die während des Ladens von Bildern angezeigt wird? Ein Beispiel wäre http://landerapp.com/?Symbol wird geladen, während Bilder geladen werden
Mein Ziel ist es zu verhindern, dass der Benutzer diese Bilder auf dem Bildschirm sieht, bis sie bereit sind zu animieren (siehe das Problem bei http://tsawebmaster1.hhstsa.com/index.html).
Beginnen wir mit einem sichtbaren Ladebild, das genau in der Mitte des Bildschirms fixiert ist. Dann, wenn die Seite vollständig geladen ist, werden wir eine "page_loaded" Klasse auf dem <body> hinzufügen, die:
[1] beginnt die Ausblendung des Lade Bild
[2] beginnt die Fade-in und Übersetzung offscreen-Bilder auf dem Bildschirm
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" />Wenn Sie Vanilla oder jQuery verwenden würde ich vorschlagen, dass Sie 012.335 verwenden, die genau das erreichen soll, was Sie wollen.
ich mit so etwas wie dies gehen würde:
$(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>