在鼠标悬停时加载javascript链接？

Question

I got a page on my website, that contain a table with a lot of tooltips. The tooltips are "offered" by wowhead.com. The problem is the loading time - takes forever to completely load the page (because of the tooltips) and the page is kinda "locked" until they are done loading.

Demo link: https://wowpug.net/pug/HQDCXJWSTV

Example code:

<a href="https://classic.wowhead.com/item={{ $softreserves[0]['item_id'] }}" data-wowhead="item={{ $softreserves[0]['item_id'] }}" target="_blank">
                    {{ $softreserves[0]['item_name'] }}
                </a>

I then came a cross another website, doing almost the same as me, but his tooltips load on mouseover instead of pageload. Demo: https://softres.it/raid/8vyko4

I think that is a very smart way to to do, and the page loads extremely fast.

Not sure what he is doing and find it hard to research something i dont understand. Like what search-terms to use etc.

Hope some of you guys can help me out here :)

Link to documentation on wowhead.com : https://www.wowhead.com/tooltips

Answer 1

In the inspector dev tools (in my example it's chrome) you can see that your website fetches the tooltip data for all the items at the same time

Try to click on to the initiator of a request (4th column - basic.js...) and see when the request is happening. You can go up the callstack and see what sequence of actions triggers the request. So your goal is to make that request on "mouseover" event, not when the row is initialized.