Okay so I recently figured this out, fixed it on my scripts, forgot about it, was just reminded, realized I ought to document\/share. So this is getting posted here and a couple other places.<\/p>\n\n\n\n
When you do a fetch() or $.get() the browser only fetches that specific page, and doesn’t bring along any external\/linked files. One extra server request on the page – so far, so good, and we know to expect not to get the external javascript coming along for the ride, etc<\/p>\n\n\n\n
HOWEVER.<\/p>\n\n\n\n
The moment you use Depending on which page you’re fetching, it could only make a trivial difference, but equally it can easily result it fetching hundreds of images, even if you don’t actually want to use any of them. Worse, that’s potentially hundreds of broken<\/em> images who’s requests have to time out before the next ‘on page load\/document ready’ javascript will execute (which is how I realized something fishy was going on).<\/p>\n\n\n\n The solution is to make the images sourceless (so far as the browser is concerned) before<\/em> parsing the html, and then restore the src value for any images you actually want shown.<\/p>\n\n\n\n (I can’t claim credit for the solution, but I’ve gone and forgotten which blog I found it on. Sorry.)<\/p>\n","protected":false},"excerpt":{"rendered":" Okay so I recently figured this out, fixed it on my scripts, forgot about it, was just reminded, realized I ought to document\/share. So this is getting posted here and a couple other places. When you do a fetch() or $.get() the browser only fetches that specific page, and doesn’t bring along any external\/linked files…. Read More<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[21],"tags":[28,30,38,29],"class_list":["post-137","post","type-post","status-publish","format-standard","hentry","category-basics","tag-ajax","tag-javascript","tag-jcink-skinning","tag-jquery"],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":317,"url":"https:\/\/webaffair.net\/blog\/code\/basics\/introduction-to-browser-development-tools\/","url_meta":{"origin":137,"position":0},"title":"Introduction to Browser Development Tools","author":"Jay","date":"December 18, 2025","format":false,"excerpt":"All modern desktop browsers now have integrated browser tools, however, there are subtle (and sometimes less subtle) differences between each. I find that Firefox has the best overall, though I do switch to Chrome for some specific debugging tasks. I personally only use Edge or Safari when trying to isolate\u2026","rel":"","context":"In "Basics"","block_context":{"text":"Basics","link":"https:\/\/webaffair.net\/blog\/category\/code\/basics\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/webaffair.net\/blog\/wp-content\/uploads\/2025\/12\/DevToolsSettingsFirefox-1-scaled.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/webaffair.net\/blog\/wp-content\/uploads\/2025\/12\/DevToolsSettingsFirefox-1-scaled.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/webaffair.net\/blog\/wp-content\/uploads\/2025\/12\/DevToolsSettingsFirefox-1-scaled.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/webaffair.net\/blog\/wp-content\/uploads\/2025\/12\/DevToolsSettingsFirefox-1-scaled.png?resize=700%2C400&ssl=1 2x, https:\/\/i0.wp.com\/webaffair.net\/blog\/wp-content\/uploads\/2025\/12\/DevToolsSettingsFirefox-1-scaled.png?resize=1050%2C600&ssl=1 3x, https:\/\/i0.wp.com\/webaffair.net\/blog\/wp-content\/uploads\/2025\/12\/DevToolsSettingsFirefox-1-scaled.png?resize=1400%2C800&ssl=1 4x"},"classes":[]},{"id":16,"url":"https:\/\/webaffair.net\/blog\/code\/snippets\/automatically-generate-google-fonts-link\/","url_meta":{"origin":137,"position":1},"title":"Automatically generate Google Fonts link.","author":"Jay","date":"September 17, 2021","format":false,"excerpt":"Useful if you are making a customizable skin, or if you allow users to set font preferences in their account settings. Of course, the basic way you include google fonts on your page is like this: HTML (preconnects are technically optional): new DOMParser().parseFromString(data, 'text\/html');<\/code> or $(data)<\/code> it will pre fetch every image on that page<\/em><\/strong> even though you haven’t inserted any of them onto the visible page yet.<\/p>\n\n\n\n$.get('\/?act=Members&max_results=1000', function (data) {\n\u00a0 \u00a0 data = data.replace(\/src=\/g, \"data-src=\"); \/* prevent image prefetching!! *\/\n\u00a0 \u00a0 let doc = new DOMParser().parseFromString(data, 'text\/html');\n\n\u00a0 \u00a0 \/* your code *\/\n\n\u00a0 \u00a0 $(\".thing.inserted.onto.page img[data-src]\").each((i,e) => { \n e.src = e.dataset.src; \n });\n});<\/code><\/pre>\n\n\n\n