Lazy Loading Section Background Image

Kenny k
18 Posts
Kenny k posted this 07 August 2017

Hi how can I add lazy loading to background image of a section, so the image is only loaded when that section scrolls to view.
Thanks

Hi how can I add lazy loading to background image of a section, so the image is only loaded when that section scrolls to view. Thanks
Vote to pay developers attention to this features or issue.
11 Comments
Order By: Standard | Newest
Support Team
Support Team posted this 07 August 2017

Hi,

You can try to add the image and set the Extension >> Animation for it. Use something like Fade effect on the ScrollLoop.

Sincerely,
Hella

Hi, You can try to add the image and set the Extension >> Animation for it. Use something like Fade effect on the ScrollLoop. Sincerely, Hella
Kenny k
18 Posts
Kenny k posted this 07 August 2017

Hi Hella,

It defies the objective of lazy loading which tries to make it light and quick, but animation is processor heavy!
Plus it loads the image anyways on start and then fades it on scroll.

It seems lazy loading has to be added to the images, or an option for a css to be added to elements including images that perhaps I can do a css trick to get it to lazy load.

Hi Hella, It defies the objective of lazy loading which tries to make it light and quick, but animation is processor heavy! Plus it loads the image anyways on start and then fades it on scroll. It seems lazy loading has to be added to the images, or an option for a css to be added to elements including images that perhaps I can do a css trick to get it to lazy load.

Last edited 08 August 2017 by Kenny k

Support Team
Support Team posted this 08 August 2017

Hi,

You can use the manual solution, Themler does not have such built-in functionality.

Sincerely,
Hella

Hi, You can use the manual solution, Themler does not have such built-in functionality. Sincerely, Hella
Kenny k
18 Posts
Kenny k posted this 08 August 2017

Which manual solution are you referring to?

Which manual solution are you referring to?
Support Team
Support Team posted this 08 August 2017

Hi,

I mean that you can search for a plug-in or some code over the internet that will implement the desired behavior.

Sincerely,
Hella

Hi, I mean that you can search for a plug-in or some code over the internet that will implement the desired behavior. Sincerely, Hella
Kenny k
18 Posts
Kenny k posted this 08 August 2017

There is none. None of the plugins have the ability to lazyload background images hence the page is made up from shortcodes. I cannot change your shortcodes to achieve that. Its impossible

There is none. None of the plugins have the ability to lazyload background images hence the page is made up from shortcodes. I cannot change your shortcodes to achieve that. Its impossible
xammpp
19 Posts
xammpp posted this 08 August 2017

https://wordpress.org/plugins/lazy-load/
https://wordpress.org/plugins/bj-lazy-load/
https://wordpress.org/plugins/jquery-image-lazy-loading/
https://wordpress.org/plugins/a3-lazy-load/
https://wordpress.org/plugins/wp-image-lazy-load/
https://wordpress.org/plugins/ajax-load-more/
https://wordpress.org/plugins/rocket-lazy-load/
https://wordpress.org/plugins/unveil-lazy-load/

Consult with one of the plugin developers and they may give you a solution to your specific problem, but have a look at all the above mentioned as you never know, might work with one.

Alternatively, I have had great success creating a lazy load website using Divi, so in theory, the Divi Builder plugin should work. I have tested it, and the Divi Builder plugin works just fine with Themler assuming your host allows you to disable ModSecurity otherwise you'll get a 403 error.

https://wordpress.org/plugins/lazy-load/ https://wordpress.org/plugins/bj-lazy-load/ https://wordpress.org/plugins/jquery-image-lazy-loading/ https://wordpress.org/plugins/a3-lazy-load/ https://wordpress.org/plugins/wp-image-lazy-load/ https://wordpress.org/plugins/ajax-load-more/ https://wordpress.org/plugins/rocket-lazy-load/ https://wordpress.org/plugins/unveil-lazy-load/ Consult with one of the plugin developers and they may give you a solution to your specific problem, but have a look at all the above mentioned as you never know, might work with one. Alternatively, I have had great success creating a lazy load website using Divi, so in theory, the Divi Builder plugin should work. I have tested it, and the Divi Builder plugin works just fine with Themler assuming your host allows you to disable ModSecurity otherwise you'll get a 403 error.
Kenny k
18 Posts
Kenny k posted this 09 August 2017

I have tried all the above plugins, one plugin (Lazy Load XT) allows you to lazy load background images, but you need to code it in, as it stands, themler is written in short codes so I don't have access to code it without going through much hassle.

I can't disable ModSecurity either so that's out of question.

I have tried all the above plugins, one plugin (Lazy Load XT) allows you to lazy load background images, but you need to code it in, as it stands, themler is written in short codes so I don't have access to code it without going through much hassle. I can't disable ModSecurity either so that's out of question.
Kenny k
18 Posts
Kenny k posted this 12 August 2017

Anyone looked into this? I have tried all plugins under the sun and non seem to work. Background images do not get lazy loaded.

Anyone looked into this? I have tried all plugins under the sun and non seem to work. Background images do not get lazy loaded.

Last edited 25 August 2017 by Kenny k

Kenny k
18 Posts
Kenny k posted this 25 August 2017

Anyone looked into this? I have tried all plugins under the sun and non seem to work. Background images do not get lazy loaded.

Anyone looked into this? I have tried all plugins under the sun and non seem to work. Background images do not get lazy loaded.
Support Team
Support Team posted this 29 August 2017

Hi,

Unfortunately we cannot test all plugins and check now they work to find where the problem could be. We suggest that you find the plugin which works with HTML <img> elements and css background images (background-image property), test the plugin with the default WP theme with images and backgrounds and if it works with default WP theme ask the plugin developers what could be wrong. They should now how their plugin works. If it is something related to exactly Themler theme we'll check it on our side. But even if you're using content Sections the Section background is a regular css background-image in the css file.

Thank you,
Olivia

Hi, Unfortunately we cannot test all plugins and check now they work to find where the problem could be. We suggest that you find the plugin which works with HTML `<img>` elements **and css background images** (`background-image` property), test the plugin with the default WP theme with images and backgrounds and if it works with default WP theme ask the plugin developers what could be wrong. They should now how their plugin works. If it is something related to exactly Themler theme we'll check it on our side. But even if you're using content Sections the Section background is a regular css `background-image` in the css file. Thank you, Olivia
You must log in or register to leave comments