Log in

Stats

  • Category: Third Party integrations
  • License: GNU General Public License (GPL) version 2
  • Updated: 2012-11-4
  • Downloads: 1161
  • Recommendations: 18

Other Projects

View Matt Beckett's plugins

Lazy Load Images for Elgg 1.8

Delays image loading until after the page has rendered, only loads images in the viewport

Last updated 282 days ago

This is an Elgg implementation of the jquery lazy load plugin by Mika Tuupola: http://www.appelsiini.net/projects/lazyload

The purpose of this plugin is to delay the loading of images until the page has rendered.  Then images within the browser viewport are loaded on an as-needed basis as the user scrolls.  For long pages this should decrease load times as images way down the page aren't being loaded at the same time.  If a user doesn't scroll down the page this means images aren't being loaded unnecessarily (also saving bandwidth and server resources).

Degrades gracefully for users with javascript disabled.

Release Notes:

- fixes issue where some images didn't load on pageload/resize

- triggers the scroll event on pageload and window resize

Comments

  • costakisc 449 days ago

    dascooperz been telling me about lazy load, guess i am going to start looking into it.  

  • DhrupDeScoop 449 days ago

    good stuff for -- *not loading all images until user tries to actuallly (scroll &) look !

  • ura soul 449 days ago

    a quick test on my site showed that one of the background images at the bottom of the site frame was rendered 10-15px too far downwards.. i don't know why and thought you might like to know. 

    let me know if there's any data you might find helpful from my site.

  • Matt Beckett 449 days ago

    what do you mean rendered 15px too far downwards?  I do have them loading slightly below the viewport threshold so as you scroll there's even less noticeable loading.

  • Tom 449 days ago

    Yah! I like pumpkin pie and I like lazy load images too. This is good stuff. I check it out and see how it goes.

  • Matt Beckett 449 days ago

    oh, I just noticed you said background image - this only targets images that use the <img> tag.  It doesn't affect images loaded as css backgrounds.

  • costakisc 449 days ago

    lazy load can be used for more than just images?  i know that question has nothing to do with this plugin, but just wondering?

  • Matt Beckett 449 days ago

    It certainly would be cool to lazy load entire chunks of html.  The jquery plugin behind this is only for images though, it would be an entirely different implementation and a *lot* more complicated.

  • DhrupDeScoop 449 days ago

    ;-)  answered already i see...
    yep - woud be a v-e-r-y mechanism eh ?
    and mucho more code stuffs;
    eventually would tie in with ajax'able facilities too.

    have a look at how the endless scroll does his stuff;
    something kinda along those lines -
    id / class selector addressable divs,
    and a foolproof way to detect viewport location for the divs..
    not sure if the img detector will work same for divs content.

    if wanna play @this trick - look into ifram`d/ajax`d modal popups
    .. will have some common technology aspects.

     

     

  • DhrupDeScoop 449 days ago

    that infinite scroll plugin is the closest you'll find so far..