Home Forums Glissando Stop load on inactive tabs/toggles

This topic contains 3 replies, has 2 voices, and was last updated by  Joshua 6 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #46556

    Samantha
    Participant

    Hi Joshua,

    As always, love your theme!

    I am building a site for a client that is *very* image-heavy. The client is a photographer and he is using his website as a portfolio for subscribers to his photo content. We are hoping the site can have pages for different “levels” of subscribers, and those levels are password protected (using WordPress’s native password tool). Once on the password-protected page, we want users to have access to all photo content, and the top levels have access to all previous archives, so tons of photos. We are using tabs and toggles to organize the content, and the page load times are LOOOONGGGGG. We are using the FooGallery plugin which is working on a lazy load feature but is not active yet.

    Is there a way to keep inactive tabs/toggles from loading until they are called upon? I think the reason for the slow load times is because the page is requesting hundreds of images at once when it loads, but it only needs to request the active gallery.

    Any advice would be great.

    #46557

    Samantha
    Participant
    This reply has been marked as private.
    #46558

    Samantha
    Participant
    This reply has been marked as private.
    #46559

    Joshua
    Keymaster

    This isn’t really a theme related question, but I can give you some very basic guidance. The long load times are almost guaranteed to be the massive amount of images. There’s little point in lazy loading the actual content (HTML) as this isn’t data intensive, so focusing on the images is your best bet.

    Waiting on your image gallery plugin lazy loading feature would probably be your smartest move. Alternatively, you could try a plugin that does this for all images as they come in the viewport (https://wordpress.org/plugins/bj-lazy-load/ is one option). However, with either of these options you may need to write some javascript to initialize the load when the tab is clicked. Depending on how the lazy loading is written, the plugin may or may not detect the images in the viewport (since tabs are technically not in the viewport when closed) and choose not to load them. Similarly, if you have 6 tabs with 10 images each, it may detect that they’re all in the viewport at the same time (since all tab headings would be in the viewport) and result in the same issue of 60 images loading at once.

    My personal opinion is that you’re going to have a difficult time with this method either way due to how lazy loading works and separating these into pages will make your life a lot easier. Either you’re loading a bunch of images at once because they’re detected in the viewport all at once or they aren’t detected and don’t load properly. Depending on the number of images you need to load at once and your tolerance for wait times, I would either write a custom script to:

    a. Lazy load images on tab click.
    b. Or AJAX the content on tab click.

    The first is probably going to be a bit easier overall, but with either of these methods, you’ll probably want to add a loading icon of some type to the tab area as the images load.

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.