Change Details

Had a really interesting chat with @krinkle just now. He pointed out that in PagePreviews we wait for the document to be loaded, query the page to get all the links that can be hovered and then add a event handler to all those links. The downside of this is there is * the loading of page previews is delayed on the entire page being parsed and the document being ready * a cost to querying the DOM to obtain all links. Using jQuery event delegation we can avoid the need to wait till the DOM is ready by adding the event listeners as soon as the code has been parsed and run. ``` $(() => $('a').on(showHoverCard)); ``` becomes ``` $(document).on('click', 'a', showHoverCard); ``` This will make use of event bubbling to add a single event handler to the body element. When the event fires, it will look at ev.target and fire the event only if the element matches the selector. This means a link that has been rendered before the document is ready will show a page preview right away. More documentation here: http://api.jquery.com/on/ This seems like a no-brainer. == Acceptance criteria [] Remove document ready blocker inside Popups

Had a really interesting chat with @krinkle just now. He pointed out that in PagePreviews we wait for the document to be loaded, query the page to get all the links that can be hovered and then add a event handler to all those links. The downside of this is there is * the loading of page previews is delayed on the entire page being parsed and the document being ready * a cost to querying the DOM to obtain all links. Using jQuery event delegation we can avoid the need to wait till the DOM is ready by adding the event listeners as soon as the code has been parsed and run. ``` $(() => $('a').on('click', showHoverCard)); ``` becomes ```lang=js $(document).on('click', 'a', showHoverCard); ``` This will make use of event bubbling to add a single event handler to the body element. When the event fires, it will look at ev.target and fire the event only if the element matches the selector. This means a link that has been rendered before the document is ready will show a page preview right away. More documentation here: http://api.jquery.com/on/ This seems like a no-brainer. == Acceptance criteria [] Remove document ready blocker inside Popups

Had a really interesting chat with @krinkle just now. He pointed out that in PagePreviews we wait for the document to be loaded, query the page to get all the links that can be hovered and then add a event handler to all those links. The downside of this is there is * the loading of page previews is delayed on the entire page being parsed and the document being ready * a cost to querying the DOM to obtain all links. Using jQuery event delegation we can avoid the need to wait till the DOM is ready by adding the event listeners as soon as the code has been parsed and run. ``` $(() => $('a').on('click', showHoverCard)); ``` becomes ```lang=js $(document).on('click', 'a', showHoverCard); ``` This will make use of event bubbling to add a single event handler to the body element. When the event fires, it will look at ev.target and fire the event only if the element matches the selector. This means a link that has been rendered before the document is ready will show a page preview right away. More documentation here: http://api.jquery.com/on/ This seems like a no-brainer. == Acceptance criteria [] Remove document ready blocker inside Popups