Lazy loading images suggestion

This is a good question.

For lazyload excludes, currently you can add data-no-lazy="1" to the images you don’t want to be lazyload. However the exclude list is a good idea. Will add to next release.

About the placeholder, now you can add define( 'LITESPEED_PLACEHOLDER', data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7' ) ; into wp-config.php to change it to a transparent one, or your preferred base64 image. If you want to add some stylesheet to lazyload images, you can use this css selector: [data-lazyloaded].

Any idea about adding lazyload css textarea option to setting page tho?

Defining a base64 encoded SVG as a constant did the trick. Thanks. However, in case of SVG, the preloader is always scaled to the image viewport. Any ideas on how to force it to its regular dimensions (to avoid super-large preloaders being displayed – https://szmigieldesign.pl/realizacje/)?

[data-lazyloaded] targets all images that are being loaded with this method.

Maybe textarea for CSS is too much, a base64 encoded image as preloader seems easier to me. Still, it would be easier to have an option in LiteSpeed Cache settings to define such constant instead of manually editing PHP files.

A placeholder option will be added to next release as wished.??

Didn’t get an idea for scaled issue, sorry.

Great news, thanks!

How is placeholder represented in dom? I believe it would be possible to set its dimensions with css.

You can view the page src code. It just replaced the src with it.

Hm, that’s why placeholder is scaled according to base CSS.

I’ll have to do some research on lazy loading techniques – I bet someone already figured out some clever way to implement it without scaling the loader.

exclude option is finished. I will mark this post as resolved.

We use the data:image/gif;base64 format to help preload small images then load AFTER page loads to help speed. This worked fine before using the plugin but after trying the new jquery feature then reversing back, I seem to notice this isn’t loading any longer.

You can always hit our homepage to see what I mean. CLeared and purged cache but still no luck. Am I missing something?

HMSRE

Thanks!

Dave

Hi @hmsre,

I just noticed you have src&data-src in img attibutes already before parsing by lscwp. Is that generated by your theme or some plugin? As your src is the same base64 code, you can put them into lscwp’s lazyload placeholder (maybe you would prefer using const while not setting as its a bit long), then set the images src as usual. Our lazyload can do the same as you have done.

Currently the issue is you manually changed src to data-src and added a src base64. While our lazyload repeated it, which made your base64 src became data-src which overwrote your previous one.

Or, if you still want to change it in your theme, you can add data-no-lazy="1" to img tag and keep lazyload on, which will still make our lscwp’s js run lazyload but not do php part ( php part means replacing your images src to data-src)

Will just change our image structure out knowing you’re doing it.

Also, do you support the amp-img source tag? See also AMP-IMG Tag

Dave

Will consider. Thanks.

Also noticed that the recent update affects our galleria slider… thumbnails don’t load. Since we use lazy load for this too, need to code it out?

Galleria.ready(function(options) {
this.lazyLoad( [0,1,2,3,4,5,6,7,8,9,10], function() {
//Galleria.log(‘Thumbnails 1 – 9 are loaded’);
});
this.lazyLoadChunks(2,30);
});

Suggestion on how to code this too?

EX URL
Property Listing

Dave

As they are loaded in viewport directly, I would not suggest to use lazyload for thumbnails.

Well, I tried removing lazyload, etc… but getting conflicts when the lazy load setting is used. I turn it off from LSCWP and everything works.

I added your suggested exclusion to the img source and that’s not working. Perhaps something wrong with how you process our image insertion?

<img src="{image_url}" alt="{listing field='MLS'}" />

Loads all the images for that property for sale. Yes, we have lots of custom code, but would expect adding that you would honor the setting. Anything else you can suggest?

And for site logo, may want to suggest people add that one in the help description under “Lazy Load Image Excludes”.

• This reply was modified 7 years, 1 month ago by HMSRE.