Postload content mod

Collaboration
#1

Hey Everybody,

This is just a thought: I am looking for advice here, and if feasible, I am looking for a mod to accomplish the following:

I wonder if it is feasible to post-load content via a :‘postload mod’

All content inside that postload-mod would ONLY start to load, after! All other content has finished loading and the webpage is idle.

Sort of the opposite to preloading content.

Could Anymod help me by offering a mod to postload images which will be requiered on other pages above the fold, but not on my actual page?

So my goal would be to postload the content just in case there is some idle time while the user is readig.

Or would it be enough to simply set the entire mod to display none? :slight_smile:

#2

This is doable, and we’ve moved it to collaboration so we can work on it together :eyes:

1 Like
#3

I will try it :smiley:

#4

Here is the mod

It will wait 2 seconds after the pageload and then will load the images from the array. This will cause the browser to cache them for the next page views.

Tell me if there can be improvements

#5

I feel this approach might be a very useful approach.
It is simple = The Images will get requested 2 seconds after the pageload has finished. Just that. Always.

I have two thoughts to add:
1:
I tried to use handlebars inside of the JavaScript-Section, but that did not work when used like this: ‘{{ imageOne }}’, (I created an Image-field of that name beforehand).
2:
The styling of the image might also be set to display:none as we will not need to display (most of them) on the current page.

PS: I did not manage to edit the Code inside of the MOD (without creating a clone). Therefore, I pasted my thoughts here .

#6

ok I changed it so that you can add url in the content area instead. To use in the JS section I used mod.data.items.

I think to set the image to display:none will cause some browsers not to load them at all. This would make the mod sometime not work I think :wink:

Here is my update

#7

This is cool and I worked on it further , thank you docdocgo!

Can you actually add open the below mod?

I guess you cannot, as it is protected. But please let me know if you can see the Mod or if you cannot see it.

I am unaware about which way might be the most siutable way to share my results with you.

#8

I can’t see it :confused:

#9

Hey DocDocGo,

I cloned the MOD once again. I hope you will be able to see this one:

I additionally pushed a collaborate-button inside of the MOD. As a result, a post was created. You can view it here: Collaboration: Image preloader

Firstly, let me mention I did some research, and now I agree with you regarding your suggestion to not set the images to display:none. Some browsers might not load the image at all. Especially on mobile devices.

This is what I added to the mod:

0: If you want to see the images testwise, then activate the new Checkbox called showHiddenImages in the edit-Section.
1: I Added some readme-information
2: I added a new inner div-element and reassigned the appendTo Element
3: I added some display:flex CSS Rules

Collaboration ISSUE = High amount of MODS
#10

Here is the final product, which we’re going to include in this week’s Module Monday. Thanks Sunil & Stefan!