У меня ошибка с jquery easing

267

24 ноября 2017, 08:37

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

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;">

Answer 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)
    })
})

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