Bazhenovdev
@Bazhenovdev
bazhenovn.github.io

Как сделать прелоадер?

Всем привет друзья, как можно с помощью плагина imagesloaded сделать прелоадер прямо на картинке? Заходишь на сайт, а на месте изображения в этом же блоке крутиться прелоадер, и вот когда картинка полностью загрузилась.. то прелоадер пропадает, и появляется картинка как такое сделать? Это вот как на их офф сайте в блоке Demo, только без нажатия на кнопку all images, а суть та же.
  • Вопрос задан
  • 417 просмотров
Пригласить эксперта
Ответы на вопрос 2
rpsv
@rpsv
делай либо хорошо, либо никак
Там же есть код демки (codepen.io/desandro/pen/bIFyl ), просто событие повешайте на не клик кнопки, а на $(document).ready() к примерму
Ответ написан
PretorDH
@PretorDH
HTML5, CSS3, PHP, JS - люблю в чистом виде.
<head>
      ...
      <script ...>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/3.2.0/imagesloaded.pkgd.min.js"></script>
      ...
</head>
<body>
      ...
      ...
      <img src=" image.png ">
      ...
      ...
      <script> 
            var imgLoad = imagesLoaded( 'img' );
            function onAlways( instance ) {
                  console.log('all images are loaded');
            }
            // bind with .on()
            imgLoad.on( 'always', onAlways );
            // unbind with .off()
            imgLoad.off( 'always', onAlways );
      </script>
</body>
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы