Lazy Load Images v1.6
Release Notes
- fixes jump-to-top in IE/Chrome after internal scroll or ajax complete
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.
Project Info
Stats
- Category: Third Party integrations
- License: GNU General Public License (GPL) version 2
- Updated: 2014-11-17
- Downloads: 2463
- Recommendations: 17
Other Projects
View Matt Beckett's plugins
Hmm, that is no good news. But I can get rid of google pagespeed if I want. It is just taking care of stuff that I sometimes overlook. But in the 30 days notice they will give, I can find all loopholes and close them I guess.
There is only one cool thing I have no alternative for and that is that they combine <head> tags. I am sometimes to lazy to figure out how to get some important head tags in ELGG without further extending the head.php and then just put them in a view or page. Maybe I will have to built a plugin just to do that.
If someone has any ideas how to do that. Please comment
i think i have noowww resolved the issues with this on my site. ;)
i needed to add another entry to the jquery list for the homepagecms horizontal column that wasn't being loaded initially..
i also found that the lazy load jquery list is 'new line' seperated, rather than commas.. and that the changes there will not be seen until the caches are cleared.
@Gerard - you should just extend the page/elements/head view
@ura - yes on both counts, well done getting it working
well, i am still seeing one last strange issue.. the icons for videolist items often do not load on the first page load of the activity page.. while other images there load ok. this is a lazy_load specific issue that does not happen when lazy_load is disabled.. i have zero idea as to why this is.
@Matt, I know. I have built a plugin around extending the head view for nice dynamic metatags. You even encouraged me to do that :-). My concern is not to create a complex head.php because it is loaded on every page. So my first thought is to extend the view in the start of a plugin and only when in a specific context . That probably saves some unnecessary handling.
ok so this issue with videolist icons on the activity page is only occurring in the chromium browser and not firefox.. here.. (i haven't tested other browsers yet).
Well, i have a problem using this plugin and tha watch_my_pages.
Watch_my_pages is a ajax pagination plugin, and when I use the lazy load and w_m_p together...well, all the images loaded via w_m_p (in the river, or in anywhere I use the pagitation) don't show.I can see the image space reserved, like if it would load, but it doesn't.
Can you help me to solve this?These are 2 amazing plugins, and with them I can make my site faster and better.I can't choose between the two.
Thanks since now.
i think now, finally, i found the cause of the lazy_load issue on my activity page in chromium.. for videolist.
though i do not know exactly why only these images were effected - the lazy loading started functioning correctly after i changed the way nginx routes requests to https format.. now i am using a 301 redirect the images are loading ok.. so far. ;)
ok, great again! :)
Is there anything with this plugin that you've learned that can be applied for other people in a more generic way?
if you are thinking about improving the plugin, i would:
i would also put a note in the readme / description about the nginx issue i experienced since it will effect anyone who uses https only - and possibly other types of redirects... maybe they wouldn't be testing with chromium. not so generic, but it would have helped me!
argh... :(
lol.. the not-loading issue returneth. this intermittent glitch is a truly annoying one. i continue!
Well, I haven't been actively using this plugin lately but the need may certainly arise again so I'm always keeping tabs on potential improvements - especially as I know how much time you've put into playing around with it.
Also, I don't use nginx so I'm not aware of the specific issues you're talking about. If you can write it up though I'll gladly pull it into the readme in case anyone else needs the info.
the nginx idea did not solve my problem with lazy_load_images.. i thought it did, but it didn't..
my next target of investigation is videolist, since the only images that fail to load are videolist icons.
fyi, i logged an issue on github for the lazy_load script.. and someone has maybe found that the cause is within the timeouts that are used within the elgg plugin code after the script is called.
see here: https://github.com/tuupola/jquery_lazyload/issues/168
on closer inspection i am not sure he comprehended what those timeouts are for.. i continue!
for now i have disabled this plugin since after optimising my server i am seeing that pages load faster without lazy loading.
just tested this again with my new theme options. the gallery view uses css column-count (which creates vertical columns for html lists) - the lazy load images plugin does not handle this at all. images in the 1st column load ok, but the other columns do not load at all until i scroll about 60% down the length of the page.
i added the various different relevant css classes for the gallery images into the plugin admin panel for 'problem areas'.. but that made no difference.
Hi im using Ad Rotator on my site as sidebar
https://community.elgg.org/plugins/833989/1.7/ads-rotator-18
My code is as follows..
<div title="whats_on"> <p><a href="http://www.cduniverse.com" target="_blank"><img alt="" src="http://myelggsite.com/_graphics/pic1.png"></a></p></div>
<div title="whats_on"> <p><a href="http://www.mightyape.co.nz" target="_blank"><img alt="" src="http://myelggsite.com/_graphics/pic2.png"></a></p></div>
<div title="whats_on"> <p><a href="http://www.fishpond.co.nz" target="_blank"><img alt="" src="http://myelggsite.com/_graphics/pic3.png"></a></p></div>
When I enable lazy load everything is working well except ad rotator. The first image is displayed but the moment I move my mouse over it.. the image disappears... and pic2 or pic3 wont display. can you offer me some advice please.
just so you know - i found this newer lazy loading project today and it works flawlessly on my elgg site - so far (it's also available via the free CDN jsdelivr): https://github.com/aFarkas/lazysizes
Awesome, thanks! That does look promising.
When you say it works flawlessly, did you just switch out the library used for this plugin or do you have a new implementation?
Conveniently it uses the same class identifiers as the one in this plugin.
all i have done is loaded the js file in my theme's start.php file and then added a couple of configuration fields in the elgg view for images ('output/img') - then added some css styles to my theme to make the images fade in and scale on load. so i am not using this plugin code at all, since it was so easy to integrate it into my own theme.
when i say 'flawless' - i mean that all the right images are loading in the right way, without any need to address containers that are outside of the main flow of the document or anything like that. i just turned it on and it works! :)
@ura soul.. Do you have a github repository of your new source code?
no. here's what's needed:
start.php:
elgg view 'output/img':