[Resolved] Only load images inside Bootstrap panel on click – to reduce page load time

[Author]

Posts

[liatG]

Hi wonderful Toolsetters,
I am using a Bootstrap accordion to display various views. I want to only load the images within the panel once the panel is clicked. The page is very large (12-30 Mb) when all the images load directly when the page loads.

Accordion Panel

<button class="accordion">Step-by-Step Photo Instructions: [wpv-post-title]</button>
<div class="panel">
  <h4>Step-by-Step Photo Instructions: [wpv-post-title]</h4>
  <p>[wpv-view name="step-photos-for-bind-offs-class"]</p>
</div>

Here is the JavaScript on the view:

var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
    acc[i].addEventListener("click", function() {
        /* Toggle between adding and removing the "active" class,
        to highlight the button that controls the panel */
        this.classList.toggle("active");

        /* Toggle between hiding and showing the active panel */
        var panel = this.nextElementSibling;
        if (panel.style.display === "block") {
            panel.style.display = "none";
        } else {
            panel.style.display = "block";
        }
    });
}

The view "step photos for bind-offs class" has the images inside it.

<div class="row lato border-r">
  <div class="col-sm-1"><h4 class="inline">[types field="step-number"][/types]</h4></div>
  <div class="col-sm-4">[types field="step-name"][/types].</div>
	<div class="col-sm-7">[types field='step-photo' title='%%TITLE%%' alt='%%ALT%%' size='custom' width='500' resize='proportional' class='border'][/types]</div>
</div>

I have searched all over the Internet but I don't know code to be able to implement the suggested fixes. Is there some js or HTML or CSS that I can paste in here or some Custom Code I can add so that the images only load once the panel is clicked?

Thank you.

PS If you want to edit the views using my login information from earlier tickets, they are here:
hidden link
hidden link

Thank you so much.

[Luo Yang]

Hello,

There isn't such a built-in feature within Views plugin, it needs custom codes, but according to our support policy, we don't provide custom codes support:
https://toolset.com/toolset-support-policy/

Here are my suggestion: for example, when use click one of accordions, you can setup some JS codes to send AJAX request and update the accordion content:
hidden link
and pass the specific post ID as parameter

In server side, use wordpress API to receive the AJAX request, and render the specific post content:
https://codex.wordpress.org/AJAX_in_Plugins

[liatG]

Thank you Luo! I appreciate your help.