Lazy Load iFrame Inside the Tabs-CodePudding

wanna ask about how to lazy load the iFrame inside the Tab every time the tab is clicked? And I want to add an active class at the first time it loads. I don't understand how to code, i'm very new here.

Mine is like this :

function openCity(evt, cityName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i  ) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i  ) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className  = " active";
}

body {font-family: Arial;}

/* Style the tab */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
  width: 100vw;
  height: 100vh;
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

.tab-content {
  width: 100vw;
  height: 100vh;
}

<body>
  <div >
    <button  onclick="openCity(event, 'London')">London</button>
    <button  onclick="openCity(event, 'Paris')">Paris</button>
    <button  onclick="openCity(event, 'Tokyo')">Tokyo</button>
  </div>

  <div id="London" >
    <iframe class= "tab-content" src="https://en.wikipedia.org/wiki/London" loading="lazy">
    </iframe>
  </div>

  <div id="Paris" >
    <iframe class= "tab-content" src="https://en.wikipedia.org/wiki/Paris" loading="lazy">
    </iframe> 
  </div>

  <div id="Tokyo" >
    <iframe class= "tab-content" src="https://en.wikipedia.org/wiki/Tokyo" loading="lazy">
    </iframe> 
  </div>
</body>

Please help me how to solve this. I currently using wordpress so, is it possible doing this in wordpress? Thank you so much

CodePudding user response：

In order for the iFrames in the background to be "unloaded" you need to remove the content from them, which can be done by removing the src= attribute. I added a loop at the top of your function that iterates through all of the <iframe> elements and "clears" them, then... only the iframe that is visible will load because all of the iframes are already set to loading="lazy" This could be refactored and written way better, but this example keeps your existing code and accomplishes the goal.

function openCity(evt, cityName) {
  var i, tabcontent, tablinks, iframes;
  
  iframes = document.getElementsByTagName("iframe");
  for (i = 0; i < iframes.length; i  ) {
    iframes[i].removeAttribute('src');
    if (i == 0) { iframes[i].setAttribute('src', 'https://en.wikipedia.org/wiki/London' ); }
    if (i == 1) { iframes[i].setAttribute('src', 'https://en.wikipedia.org/wiki/Paris' ); }
    if (i == 2) { iframes[i].setAttribute('src', 'https://en.wikipedia.org/wiki/Tokyo' ); }
  }
  
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i  ) {
    tabcontent[i].style.display = "none";
  }
  
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i  ) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className  = " active";
}

Scenario: Let say you click the "London" button and then you click the "Paris" button and then inspect the source. Both London and Tokyo <iframe> content will be blank because London has been "cleared" and Tokyo was never accessed, while Paris is visible.

function openCity(evt, cityName) {
  var i, tabcontent, tablinks, iframe;
   
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i  ) {
    tabcontent[i].style.display = "none";
    iframe = tabcontent[i].firstElementChild;  //Added
    iframe.removeAttribute('src');             //Added
  }
  
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i  ) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className  = " active";
  iframe = document.getElementById(cityName).firstElementChild;   //Added
  iframe.setAttribute('src', iframe.getAttribute('data-src') );   //Added
  
}

https://jsfiddle.net/ard45tL2/7/