[email protected]
Facebook
Twitter
LinkedIn
GitHub
  • Blog
  • GitHub
  • Resume
    • LinkedIn
    • StackOverflow
  • 🙈
    • 🇺🇸 English
    • 🇪🇸 Español
    • 🇫🇷 Français
    • 🇧🇷 Português

jQuery: Cargar imagenes a medida que se necesitan (lazy load)

August 7, 2015Plugins1 Commentjfadev

Cargar todas las imágenes a de una pagina antes de abrirla puede resultar pesado en ciertos casos. La solución en esos casos puede ser una vez se ha cargado la pagina ir cargando progresivamente el conjunto de imágenes que se visualizan en ese momento (lazy load). Segun se va haciendo scroll va cargando las imagenes que se va a necesitar para su correcta visualizacion.

Si estamos usando la librería jQuery, podemos usar el plugin jQuery LazyLoad para simplificar esa tarea.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<html>
    <head>
        <script src="jquery-1.11.1.js"></script>
        <script src="jquery.lazyload.js"></script>
        
        <script type="text/javascript">
            $(document).ready(function() {
                $("img.lazy").lazyload({
                    effect : "fadeIn"
                });
            });
        </script>
    </head>
    <body>
        <img class="lazy" data-original="img1.jpg" width="640" height = "480"/>
        <img class="lazy" data-original="img2.jpg" width="640" height = "480"/>
        <img class="lazy" data-original="img3.jpg" width="640" height = "480"/>
    </body>
</html>

 

Doc: aqui

Descargar: aqui

: jQuery, JS, Web Developement
jfadev
https://jordifernandes.com
Programmer and systems analyst since 2006. Graduate in Software Engineering in Marseille +10 years of experience in Web Technologies. Currently VueJS & Symfony.

Related Posts

Polymer 1.0 El framework ya esta listo para producción

June 2, 2015jfadev

Detecting AdBlock with jQuery or JavaScript

August 13, 2015jfadev

Materializecss: another framework for Material Design

July 21, 2015jfadev

Translate


My Tweets

Rencent Posts

  • JFA PWA Toolkit
  • Lista de backlinks para posicionamiento web
  • Lista completa de generadores de backlinks para posicionamiento SEO
  • Modal Dialog for Material Design Lite
  • Run Symfony2 command from cronjobs in CPanel on a shared host
  • Detecting AdBlock with jQuery or JavaScript
  • Video: Introduction to Apache Cordova in Spanish
  • jQuery: Cargar imagenes a medida que se necesitan (lazy load)
  • Materializecss: another framework for Material Design
  • Directory of more of 5.000 APIs

Sponsored Links

Categories

  • APIs (2)
  • Frameworks (8)
  • Libraries (2)
  • News (8)
  • Plugins (2)
  • Projects (1)
  • Sources (1)
  • Tools (4)
  • Tricks (7)

Discover

  • Los Mejores Top 10
  • Slow Fashion Shop

Tags

3D Android API Apple Apps Babylon.js Backlinks Blog Bug Chrome Extension Database E-commerce ES6 Facebook Framework Game Engine Ghost Referrer Google Google Analytics HTML5 IndexedDB Internet of Things iOS jQuery JS Material Design Messenger Native Apps PHP Portfolio Referrer Spam Responsive Secret codes SEO SMS Spam Storage Symfony2 Text editor UI Web Developement WebGL Windows Phone WooCommerce Wordpress
Facebook
Twitter
LinkedIn
GitHub

© 2013-2020 Jordi Fernandes Alves