Unlike other solutions that require you to add an image of the link in a
data attribute this script relies on iframe embeds. You may be screaming out loud on how ineffient it is and yes you’re right. You can choose to defer the iframe preview load but it still not very efficient as opposed to pure image previews. On the bright side, you see live previews!
Initializing the script
Add the following code below above
</head> in your website.
Next, let’s add the necessary tags to the HTML to mark the links.
The mark up is straight forward. All you have to do is wrap up the links in a paragraph or div with any of the following three ids:
- id=”p1″: Link previews are fetched as soon as the page is loaded, therefore, previews are shown instantly on hover. Optimal if the number of links is limited to a few.
- id=”p2″: In this mode, all the link previews are fetched when the user hovers the parent region(the region within this id).
- id=”p3″: This is slower than the other two but saves bandwidth. Link Previews are loaded only when the user hovers the particular link.
You can use any ID name for the parent div, but don’t forget to initialize it with the required prefetch mode in the above script.
Though you can use the third mode to dynamically load link previews, it still very inefficient as opposed to loading a simple image preview. So, only use this script if you understand how it works. Also, feel free to make any changes if needed.
With some tweaks to the script, you can also make it behave like Apple‘s link preview feature in Safari. This way you can interact with web page just after hovering without even leaving the page!
Switch to the HTML tab to see the HTML markup. See a live link preview of it in the results pane.
If you have any questions or require any help please leave a comment and I will help you as fast as possible.