[JamieFuchsParticipant]

Hi,

I’ve spent a lot of time working on customizing your theme to make it look as I want. However, there’s still one thing I cannot get working and that’s lazy loading and/or infinite scroll. I’ve read over numerous forum posts here but none seem to work for me.

My website is Smutpire Press. If you go to the homepage and your internet is slow, it takes a long time to load since it seems to load all the images for that page before displaying any of them.

I would much rather have it so that these images get displayed as soon as they are finished downloading so that the user doesn’t click away instead of waiting.

So, as far as I can tell, there are two options for me:
1. Employ lazy loading. I was under the impression that this was supposed to be a default functionality for the X theme’s portfolio, however, in practice I am not seeing that.
2. Get infinite scroll working and show less images per “page.”

Are you able to help with either of these things?

[Rue NelModerator]

Hello There,

Thanks for posting in!

Regretfully, lazy loading and infinite scroll isn’t a feature in X. It could be possible with custom development, but this would be outside the scope of support we can offer. You may wish to consult a developer to assist you with this. X is quite extensible with child themes, so there are plenty of possibilities.

To have lazy loading for your images, please check this articles:
http://www.appelsiini.net/projects/lazyload
https://css-tricks.com/snippets/javascript/lazy-loading-images/

Please follow this thread regarding infinite scroll, https://community.theme.co//forums/topic/infinite-scroll/

Thanks for understanding. Take care!

[JamieFuchsParticipant]

That’s one of the threads I tried following to make it work. Here’s what I’ve done:

Infinite Scroll Parameters
Content Selector: #x-iso-container
Navigation Selector: .pagination
Next Selector: .pagination a:last
Item Selector: .entry-featured
Callback: window.dispatchEvent(new Event(‘resize’));
Behavior: Masonry/Isotope

Change Behavior in Plugin: Plugins > Editor > Infinite Scroll, masonry-isotope.js
change two “masonry” to “isotope” > Save
(For this I could only find one masonry, maybe the plugin has been updated since that post was written)

The problem for me seems to reside in the resize function. I’ve tried a few different variations and none seem to work properly. These are the one’s I’ve tried:
$(window).trigger(‘resize’);
window.dispatchEvent(new Event(‘resize’));
$(window).resize();

On my dev environment, $(window).resize(); seemed to work perfectly so I went live with it. However, now it’s not. For whatever reason, most of those functions don’t seem to understand how high my images are and the newly fetched images end up overlapping.

Here’s a screenshot so that you can understand what I mean:
https://smutpire.com/screenshot.jpg

If you want, you can look at my website at https://smutpire.com, however I’ve temporarily disabled infinite scroll because it’s not working properly.

The images do resize, but only when I eventually scroll to the bottom and a new set loads.

Do you have any other ideas? I’d like to avoid hiring a developer when I’m so close to a solution.

[NicoModerator]

Hi There,

Thanks for the update. We’d really love to help you however it is beyond the scope of our support and if we will suggest it would be unfair to others that we tried to fix or to help beyond our scope. Aside from that, if we will suggest, we could not guarantee that would help you because we are not expert of it. It would be best to hire someone dedicated to this technical issue.

We could give it try to check if someone in our staff knows this, again, we are not expert on lazy loading or infinite scroll, we could not guarantee that we could help on this issue. Share us your dev site and live site admin credentials so we could take a closer look on the both setup.

Don’t forget to set it as private reply.

Thank you so much for understanding.

[Author]

Posts