DEV Community

Rafael Cachoeira
Rafael Cachoeira

Posted on

4 1

Jquery Lazy Load Tabs from just DataAttributes

Scenario

The content of my tab comes from another url address and I need to process a lazy bootstrap tab! Once the tab content has been visited, the url should no longer be loaded.

Proposal

I created some data attributes to handle getting another page on demand. After that, I set the tab as loaded, passing the tab to the static tab!

The three attributes

 /*
  Attributes: 
        data-lazy-url: string (required) to get
        data-lazy-loaded: boolean (optional) default false, once true, the tab never load anymore
        data-lazy-target: string (required) selector to element 
*/
Enter fullscreen mode Exit fullscreen mode

The Html

<a class="nav-link"
     data-lazy-url="https://dev.to/raafacachoeira" 
     data-lazy-target="#MyTab" 
     data-toggle="tab" 
     href="#MyTab" 
     role="tab" 
     aria-controls="MyTab" 
     aria-selected="false">
      My blog posts
    </a>
Enter fullscreen mode Exit fullscreen mode

And for the Tab Content

<div class="tab-pane" id="MyTab" role="tabpanel">
</div>
Enter fullscreen mode Exit fullscreen mode

Code: https://codepen.io/raafacachoeira/pen/mdMXwWW

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay