Появление фотографий после их загрузки

197

20 сентября 2017, 12:04

Еесть фотки на сайте, которые динамически подгружаются и скорость загрузки зависит от интернета, фото стоят изначально в jQuery('img').css({'opacity': '0'});

Нужно, чтобы они стали jQuery('img').css({'opacity': '1'}); только после того, как полностью загрузились на стороне клиента.

<!DOCTYPE html> 
<html lang="en"> 
<head> 
	<meta charset="UTF-8"> 
	<title>Document</title> 
</head> 
<style type="text/css"> 
	img{ 
		width: 200px; 
		height: 200px; 
		transition: all .5s 
	} 
</style> 
<body> 
	<img src="img/1.jpg"> 
	<img src="img/2.jpg"> 
	<img src="img/3.jpg"> 
	<img src="img/4.jpg"> 
	<img src="img/5.jpg"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<script type="text/javascript"> 
 
jQuery('img').css({'opacity': '0'}); 
 
 
</script> 
 
</body> 
</html>

Answer 1

Я делаю это так:

$('img[data-src]').each(function() { // перебираем все img с атрибутом data-src 
  var img = $(this); 
  img.attr('src', img.attr('data-src')); // подставляем адрес в src 
  img.on('load', function() { // после загрузки изображения 
    img.removeAttr('data-src'); // убираем атрибут data-src, после чего отображается загруженное изображение  
  }); 
});

img { 
  max-width: 200px; 
  float: left; 
  display: block; 
  -webkit-transition: all 0.4s ease-in-out; 
  -o-transition: all 0.4s ease-in-out; 
  transition: all 0.4s ease-in-out; 
} 
 
img[data-src] { 
  opacity: 0; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<img data-src="http://files.all-free-download.com//downloadfiles/wallpapers/1920_1080/heihachi_mishima_tekken_7_4k_17496.jpg" alt="" /> 
<img data-src="http://files.all-free-download.com//downloadfiles/wallpapers/1920_1080/forza_horizon_3_hd_xbox_one_17493.jpg" alt="" /> 
<img data-src="http://images.all-free-download.com/images/wallpapers_thum/teenage_mutant_ninja_turtle_out_of_the_shadows_5k_17489.jpg" alt="" /> 
<img data-src="http://files.all-free-download.com//downloadfiles/wallpapers/1920_1080/justice_league_2017_movie_17488.jpg" alt="" /> 
<img data-src="http://files.all-free-download.com//downloadfiles/wallpapers/1920_1080/dont_breathe_2016_horror_movie_17475.jpg" alt="" />

Этот же вариант на чисто JS:

[].forEach.call(document.querySelectorAll('img[data-src]'), function(img) { // перебираем все img с атрибутом data-src 
  img.setAttribute('src', img.getAttribute('data-src')); // подставляем адрес в src 
  img.onload = function() { // после загрузки изображения 
    img.removeAttribute('data-src'); // убираем атрибут data-src, после чего отображается загруженное изображение  
  }; 
});

img { 
  max-width: 200px; 
  float: left; 
  display: block; 
  -webkit-transition: all 0.4s ease-in-out; 
  -o-transition: all 0.4s ease-in-out; 
  transition: all 0.4s ease-in-out; 
} 
 
img[data-src] { 
  opacity: 0; 
}

<img data-src="http://files.all-free-download.com//downloadfiles/wallpapers/1920_1080/heihachi_mishima_tekken_7_4k_17496.jpg" alt="" /> 
<img data-src="http://files.all-free-download.com//downloadfiles/wallpapers/1920_1080/forza_horizon_3_hd_xbox_one_17493.jpg" alt="" /> 
<img data-src="http://images.all-free-download.com/images/wallpapers_thum/teenage_mutant_ninja_turtle_out_of_the_shadows_5k_17489.jpg" alt="" /> 
<img data-src="http://files.all-free-download.com//downloadfiles/wallpapers/1920_1080/justice_league_2017_movie_17488.jpg" alt="" /> 
<img data-src="http://files.all-free-download.com//downloadfiles/wallpapers/1920_1080/dont_breathe_2016_horror_movie_17475.jpg" alt="" />