0

как я могу вставить затухающую анимацию?

init().fadeIn('medium') показала ошибку. Помоги пожалуйста. спасибо

function init() {
  var imgDefer = document.getElementsByTagName('img');
  for (var i = 0; i < imgDefer.length; i++) {
    if (imgDefer[i].getAttribute('data-src')) {
      imgDefer[i].setAttribute('src', imgDefer[i].getAttribute('data-src'));
    }
  }
}
window.onload = init().fadeIn('medium');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="http://soilsandstructures.com/wp-content/uploads/2017/04/no-image-icon.png" data-src="/images/1.png" style="width: 400px; height: 400px; border: 1px solid grey; margin: 20px;">
<img src="http://soilsandstructures.com/wp-content/uploads/2017/04/no-image-icon.png" data-src="/images/2.png" style="width: 400px; height: 400px; border: 1px solid grey; margin: 20px;">
<img src="http://soilsandstructures.com/wp-content/uploads/2017/04/no-image-icon.png" data-src="/images/3.png" style="width: 400px; height: 400px; border: 1px solid grey; margin: 20px;">
<img src="http://soilsandstructures.com/wp-content/uploads/2017/04/no-image-icon.png" data-src="/images/4.png" style="width: 400px; height: 400px; border: 1px solid grey; margin: 20px;">
<img src="http://soilsandstructures.com/wp-content/uploads/2017/04/no-image-icon.png" data-src="/images/5.png" style="width: 400px; height: 400px; border: 1px solid grey; margin: 20px;">
Sergey Glazirin
  • 5,648
Cabrail Kerimov
  • 1

1 Answers1

1

Вот этот код выполнит то, что вы хотели сделать:

js:
$(document).ready(function(){
    var imgDefer = document.querySelectorAll('img');
    [].forEach.call(imgDefer, function(imageElement){
       if (imageElement.dataset.src){
           imageElement.setAttribute('src', imageElement.dataset.src)
       }

       $(imageElement).fadeIn(500)

    })

})

Чтобы картинки изначально не показывались, нужно добавить следующие стили:

css:
img{
   display: none;
}
Vladlen Volkov
  • 378