How to Lazy Load Airtable?
Well, this is an issue with your website design, not specifically Airtable.
I suspect no one is anxious to comment on this issue because there are so few facts about your web site integration approach. For example, are you integrating through the API? Or, are you using an embed iFrame element?
The concept of “lazy load” suggests that your page starts to work and the data is displayed after it is fully loaded. This gives users a brief period to see the pages and read options etc. By the time they are ready to look at your data, it is rendered. Is that what you mean?
If so, you should use the DOM and javascript in the page to control what your visitors see and when they see it. One issue is that iFrame is a blocking architecture meaning that all other threads are unable to process until the iFrame is complete. As such, you need to get a little tricky to make it seamless and fast for website visitors.
This approach will block the rest of the page from loading until it finishes.
<iframe class="airtable-embed" src="https://airtable.com/embed/shrO1mFYnVvCvtQ2V?backgroundColor=yellow&viewControls=on" frameborder="0" onmousewheel="" width="100%" height="533" style="background: transparent; border: 1px solid #ccc;"></iframe>
Better to use javascript like this (example only) this will make it so the page looks like it loads instantly …
<body onload="prepareFrame('https://airtable embed URL here')">
function prepareFrame(URL) {
var ifrm = document.createElement("iframe");
ifrm.src = URL;
ifrm.style.width = "100px";
ifrm.style.height = "100px";
ifrm.style.border = "None";
ifrm.style.visibility = "visible";
document.getElementsByTagName("body")[0].appendChild(ifrm);
}
On another note - this looks crappy:
You should change the links so they are prettier:
