How to use jquery lazy load

Lets’s go, show me the code

The full version of JQuery LazyLoad is available on GitHub github.com/denissys/jquery-lazyload-example. Here I will show only the basic steps, on GitHub you can have look in each version and its own achievement.

FIRST:

You need include two JavaScript files

<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.8.4/jquery.lazyload.min.js"></script>

SECOND:

Insert this code to activate the LAZY LOAD (the parameter [effect] is optional)

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

LAST:

In the image tag, add the attribute [src] with the small image, because it will be first loaded. And on attribute [data-original] insert the large image, it will be uploaded latter.

<img data-original="assets/img/ferrai-large.jpeg" src="assets/img/github-small.png" height="500px" />

Click here to see the DEMO (example)

http://www.denissantos.com.br/assets/examples/jquery/jquery-lazyload/index.html

‹ Uma maneira simples de encontrar um delivery, conheça o Deliveria

Utilizando Amazon RDS MySQL e Hibernate ›

Marcado com: como usar jquery lazyload, como usar jquery.lazyload.js, Denis Santos, denissys, front-end, how to use jquery lazyload, how to use jquery.lazyload.js, jquery lazy load, jquery lazyload, jquery.lazyload.js, UX
Publicado em javascript, jquery, performance, plugin, scalability