How to upload images after scroll when in view-port?

Question

Look at this page:

https://www.nubank.com.br/gerando-boletos/

It has the following structure:

<p>titulo do post</p>
<img src>

<p>titulo do post</p>
<img src>

<p>titulo do post</p>
<img src>

But what I’m wondering is how to make the effect of appearing gradually that occurs in the images ONLY when we scroll the page and then get into the image.

I must search for what?

According to a colleague’s reply below, I tried it the way below and it did not work.

The picture only appears. I confirmed the lnkagem of the files

<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />



<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="jquery.lazyload.js"></script>


<p>Titulo.</p>
<img class="lazy" src="payment_swipe.png">

<script>
  $(function() {

      $("img.lazy").lazyload({
         effect : "fadeIn"
      })


  });
</script>

Answer 1

Either you use some Javascript developed to do this effect or you use some plugin ready, I suggest the Lazy Load:

<script src="jquery.js"></script> <!-- jQuery necessário -->
<script src="jquery.lazyload.js"></script>

<p>titulo do post</p>
<img class="lazy"  data-original="img/example.jpg">

<p>titulo do post</p>
<img class="lazy"  data-original="img/example.jpg">

<p>titulo do post</p>
<img class="lazy"  data-original="img/example.jpg">

<script>
    $(function(){
        $("img.lazy").lazyload();
    });
</script>

In general this is the most used, you can later customize the effects and everything, ai goes from your need and availability.