How to force/trigger the load of Wordpress native lazy loading images without scrolling (with a js to run 3 seconds after page load)? WordPress
- SOLVED
I don't like lazy-loading because it looks quite ugly for the user in terms of UX. However, I understand the benefits (faster page load, low bandwidth, high PageSpeed scores etc.)
I am planning to write a javascript code which will:
Stay in the bottom > Wait for the page to fully load > After 3 seconds it will work > Force load all the images which were lazy-loaded previously during initial page load
With this, I won't lose any speed scores (because it will load as normal with lazy loaded images) But, also will load the full images when everything is done, so user won't notice. (we do the same for loading live chat scripts. It works pretty nice)
It will probably look something like this:
<script>
window.onload = function() {
setTimeout(function(){
var ForceLoadImages = document.createElement('script');
ForceLoadImages.type = 'text/javascript';
ForceLoadImages.src = 'link-to-the-script-to-force-load-images.js';
document.body.appendChild(chatScript);
}, 3000);
};
</script>
I am not a js expert. This was just a dummy example to give an idea. I am specifically asking how to write the content of that "link-to-the-script-to-force-load-images.js" part. Will appreciate any inputs.
There was a similar question here, but need an answer for Wordpress:
https://stackoverflow.com/questions/30839469/how-to-force-loading-images-for-the-webpages-installed-lazy-load-without-scrol
Thanks in advance!
Answers (4)
Arnav Joy answers:
so you mean you want to load images after 3 sec. once the page loads completely?
Onur YILMAZ comments:
Not all images.. Only the ones waiting to be lazy loaded when user scroll into viewport..
Please read the question carefully.. Everything is pretty clear in my post.
Monit Jadhav answers:
From the example you showed it seems like they are loading a placeholder first then after load the actual image url is appended to the image tag
https://jsfiddle.net/e2wkp9zh/
I did a quick fiddle on it, check it out, let me know if it works
Monit
Onur YILMAZ comments:
Thanks will try this. But your code should get the src dynamically from each image, right?
Monit Jadhav comments:
Yes for example i just used the unsplash api, you will need to replace it with your own image srcs. One workaround is using data attribute on images where you can echo your image urls and then use them in the script,
See the updated fiddle
https://jsfiddle.net/e2wkp9zh/2/
Bob answers:
Can you please share your webpage URL?
Onur YILMAZ comments:
This should work regardless of our webpage but anyway. Here for example:
https://www.someka.net/excel-template/clothing-store-financial-model/
