Javascript

【Javascript】ビューポート内であるときにのみイメージをロードするlazyestload

September 15, 2018
lazyestload.js

lazyestloadはビューポート内であるときにのみイメージをロードする

  <img class="lazyestload" src="images/placeholder/sunset.jpg" data-src="images/sunset.jpg" >
  
  <script src="js/lazyestload.min.js"></script>
</body>

data-srcsetを使用

<img class="lazyestload" src="images/placeholder/sunset.jpg" data-srcset="images/sunset-1x.jpg 1x, images/sunset-2x.jpg 2x, images/sunset-3x.jpg 3x" >
<img class="lazyestload" src="images/placeholder/sunset.jpg" data-srcset="images/sunset-400.jpg 400w, images/sunset.jpg 1600w" >

picturesourceを使用

  <picture>
  	<source media="(max-width: 400px)" data-srcset="images/sunset-400.jpg" >
  	<source media="(max-width: 401px)" data-srcset="images/sunset.jpg" >
  	<img class="lazyestload" src="images/placeholder/sunset.jpg" >
  </picture>

ぼかし効果を与えるCSS。

img {
    transition: filter 0.3s;
}

img.lazyestload {                
    width: 100%;
    filter: blur(8px);
}