Lazy Load Images v1.6

Release Notes

- fixes jump-to-top in IE/Chrome after internal scroll or ajax complete

  • woah! i just installed this and the page load time dropped by 40% - 50%. :)

  • what do the custom jquery selectors do?
    can i use them to specifically exclude images from being lazily loaded? such as logo images that are needed for surounding text/elements to render effectively?

  • No you can't use them to exclude images from being lazy loaded, you can use them to add images that aren't being lazy loaded.

    For example, if you have a scrolling div, lazyload needs to have a jquery selector for that div in order to detect whether something has been made visible.

    Additionally, if you have side-by-side vertical columns, it needs to know a selector for floated-right elements as it works off the DOM order which won't match the screen order in that case.

  • i see, ok, thanks for the info. i haven't noticed those types of issues yet.
    i have seen my site's logo breaking temporarily as the text loads without the images to pad them out (the text logo on my site is relatively complex and i never found a way to code the css so that it was stable without the image parts present).. hence i was looking for a way to exclude images from lazy loading.. that would be a helpful future enhancement for me at least.

  • for anyone else experiencing similar challenges.. the solution is to use background images via css instead of img tags.. the lazy_loading only effects img tagged elements.

  • i've got a couple of issues here with the lazy_load plugin.
    occaissionally the lazy images do not load.. although their spaces are reserved, the actual images never show on the page.

    more significantly though, i just saw this fatal error while searching in the translation_editor from coldtrick (i already increased the php memory limit to see if that was the issue.. the error occurred again, just with higher amounts of bytes shown):

    Fatal error: Allowed memory size of 100663296 bytes exhausted (tried to allocate 29270048 bytes) in /mysite/mod/lazy_load/start.php on line 86 Call Stack: 0.0094 242136 1. {main}() /mysite/engine/handlers/page_handler.php:0 4.3279 9317848 2. page_handler() /mysite/engine/handlers/page_handler.php:46 4.3452 9372944 3. call_user_func() /mysite/engine/lib/pagehandler.php:53 4.3452 9373048 4. translation_editor_page_handler() /mysite/engine/lib/pagehandler.php:53 4.3546 9374168 5. include('/var/www/html/infiniteeureka/mod/translation_editor/pages/search.php') /mysite/mod/translation_editor/start.php:45 6.7372 10451968 6. elgg_view_page() /mysite/mod/translation_editor/pages/search.php:32 6.7374 10452736 7. elgg_view() /mysite/engine/lib/views.php:648 7.2830 12041184 8. elgg_trigger_plugin_hook() /mysite/engine/lib/views.php:520 7.2830 12042496 9. call_user_func_array() /mysite/engine/lib/elgglib.php:989 7.2830 12043208 10. lazy_load_defaultpage() /mysite/engine/lib/elgglib.php:989 13.1494 41371064 11. str_replace() /mysite/mod/lazy_load/start.php:86

  • i haven't seen that out of memory issue again.

    where i am at now with lazy image loading is:

    • i am using ajax loading for elgg tabs now and lazy_load_images does not detect the new images; though they do load.. just not lazily.
    • some images simply do not load.. e.g. the groups widget on my homepage_cms page.. some icons in the list load and some don't.
    • i updated the lazy load script to 1.9.. but that didn't make much difference.
    • i looked at your regex code for image detection and ran it through a regex tool online.. and the syntax wasn't liked by the tool... so i couldn't progress there.. i don't know much about regex syntax presently.

    so for now i will disable this plugin. any updates are welcome here for sure.

  • i just returned to look at this again, i find that on my live site, with the ajax loading code disabled.. so the elgg lists are being displayed with standard core elgg code - for some reason, the images for videolist icons and some other images for list items are not being loaded at all on the first page load, when lazy_load_images is activated - however, they are rendered when i refresh the page.. 


    so the 1st load fails, the 2nd is successful. this is with default code of v.1.6 of the lazy_load_images plugin..

    i don't know if  adding any selectors to the list in the admin area for this plugin will help the situation.. any tips welcomed here.

  • i just updated the lazy load script to the latest version (1.9.1) and am finding that the images now load quickly and reliably.. i definitely recommend that upgrade.

  • oops.. i typed too soon..
    the issue with images not loading is persisting with v1.9.1 too.. i will investigate soon.

  • ah.. this glitch only occurs when the elgg caches are enabled.. any tips on finding why this causing images to intermittently not load are welcomed!

  • I'm not really sure, this is only being used on one of my projects (maybe AU as well, I'm not sure) but it's working fine there.  If you do track down anything that can specifically be done to increase performance or clears up bugs I'll gladly add it.

  • ok thanks.. for reference, the list of issues on github for the original jquery plugin is here:
    https://github.com/tuupola/jquery_lazyload/issues

    there are many tweaks needed for various features to be perfected.
    one issue there is that they say the latest version of the jquery plugin now supports lazy loading of background images - i think i would possibly need to change your plugin to support that.. not sure yet.

  • i think possibly my issue was due to a conflict between the minify plugin in elgg and the minifed version of the lazy_load script.. i hav replaced the minified version of the lazy_load script with the full version and now the images are (so far) loading ok. - i have done about 30-40 page loads with no errors - whereas previously an error was arising every 5-15 or so.

  • You seem to be biting your own tail with all of these plugins :-) Minify plugin is useless, as the author says himself, since most of the code is into core now.

    And if I do find any non mininified script, I minify it myself. It's  a one time job and always safer.

  • i did ask about whether minify was in core or not and never saw an answer.. i have seen the option to minify in elgg core in elgg 1.9 - but not in 1.8.

    i can see that the language string for the minification process exists in my german translation for elgg core and not for english.. so if minify is included in elgg core it is not being made very clear at all (i.e. the minification is totally unmarked!).

    i just disabled minify on my site to test the difference and the page size went up by 30+Kb.. and on the first page load the lazy_loading failed again!!

    @gerard - why do you say minification is in core now? you can see here in evan's comments that he says it will be released 'soon': http://community.elgg.org/plugins/489179/0.3/minify?annoff=25
    yet as far as i know it is not yet released (only in github version of 1.9).

  • I don't believe there is any built in minification in 1.8

  • Quote from Evan Winslow (author of the minify plugin and core developer)

    Evan Winslow 429 days ago

    CSS+JS Minification just landed in core. This plugin will be obsolete soon enough so I'm not going to bother maintaining it anymore.

  • @gerard - yes, though it is not in core yet... not in the released version.. only in the github version of 1.9.. so despite any bugs that may be in the minify plugin, that remains the easiest way of auto-minifying elgg.
    so i'll go and turn it back on again!

  • oh well.. the images are back to not loading correctly again! they always load if i refresh the page..
    looks like i will need to put some fuel in the debugger..

  • Try google pagespeed mod in apache. Works flawless here

  • i am using nginx- the nginx pagespeed mod is not entirely flawless presently and i am unsure of the level of interaction that the pagespeed system has with google's servers.. i am consciously choosing to use only free / non proprietry and non corporate software wherever possible.

  • i just realised that i needed to add .elgg-sidebar to the lazy-load list of jquery selectors in the admin area for this plugin.. 
    since doing that i have not seen any more failed loadings of images.. (even though previously some of the images that failed to load were not in the sidebar area).

  • @Gerard - i just researched pagespeed further and saw that google has inserted a clause saying that they will be introducing pricing for it in the future at an undisclosed point.. so basically you help them make it and then they start charging you for it.. ;(
    https://developers.google.com/speed/pagespeed/service/pricing

Matt Beckett

I'm a self-employed web developer, family man, nerd, scuba diver. Manager/maintainer of this elgg community site, and core Elgg development team member.

Stats

  • Category: Third Party integrations
  • License: GNU General Public License (GPL) version 2
  • Updated: 2014-11-17
  • Downloads: 2282
  • Recommendations: 17

Other Projects

View Matt Beckett's plugins