Идентификатор загрузки При загрузке изображений

Как запрограммировать значок загрузки или графику, отображаемый во время изображений при загрузке страницы. Примером может служить http://landerapp.com/?Идентификатор загрузки При загрузке изображений

Моя цель - не дать пользователю увидеть эти изображения на экране, пока они не будут готовы к анимации (см. Проблему на http://tsawebmaster1.hhstsa.com/index.html).

источник

2016-05-16 Etan Ginsberg

Начнем с видимого изображения загрузки, которое зафиксировано в точном середине экрана. Затем, когда страница полностью загружена, мы добавим "page_loaded" класса по <body> которых:

[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

Идентификатор загрузки При загрузке изображений

ответ

Смежные вопросы