How to load images after scrolling when they are in view-port?

Navigation
0

Look at this page:

link

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 gradually appear in the images ONLY when we roll the page and then we get to the image.

Should I search for what?

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

The figure only appears. I have confirmed the file information 

<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><scriptsrc="jquery.lazyload.js"></script>


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

<script>
  $(function() {

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


  });
</script>
    
asked by anonymous 02.02.2017 / 12:43

1 answer

1

Or you use some Javascript designed to make this effect or you use some plugin ready, I suggest Lazy Load : / p> 

<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, there goes your need and availability.

    
02.02.2017 / 12:49
changing the css of pseudoclasses of elements with jquery is it possible? Onclick respect required field