Upon reviewing the Chrome Dev Tools screenshot, I am puzzled by the fact that my CSS assets are being fetched by jQuery. The CSS sheet is included in the normal way, using a
<link rel="stylesheet"><head> section, while jQuery and jQueryUI are included at the end of the body.
On inspecting line 6128, I encountered the function curCSS, which seems to be utilized by jQueryUI despite being deprecated.
jQuery v1.11.1
Google Chrome v39.0.2171.65 (64-bit)
EDIT1:
I would like to clarify that these assets are not actually utilized by jQueryUI, but rather consist of background images and fonts for my content.
EDIT2:
After commenting out jQueryUI and refreshing the page (Ctrl+F5), the assets continue to be loaded by something on line 3580.
**jQuery.js snippet removed for brevity**Furthermore, when I also comment out jQuery, the assets load as expected.
EDIT3:
To explain why only jQuery + UI were loaded without any other scripts:
I initially included jQuery + UI in my base template, and upon loading another page that did not require jQuery at all, I noticed unusual behavior from jQuery during debugging.
The markup involved was kept minimal:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Pagetitle</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"/>
<link rel="stylesheet" href="css/jquery-ui.min.css"/>
<link rel="stylesheet" href="css/fonts.css"/>
<link rel="stylesheet" href="css/style.css"/>
</head>
<body>
<div style="font-family: ArialNarrowBold">CONTENT</div>
<script type="text/javascript" src="js/jquery/jquery.js"></script>
<script type="text/javascript" src="js/jquery/jquery-ui.js"></script>
</body>
</html>
Subsequently, the Chrome dev-tools display the following:
The font ArialNarrowBold is located in fonts.css. Despite having no additional scripting on the page apart from jQuery and jQuery-UI inclusion, jQuery continues to attempt to load it independently even if jquery-ui.min.css is excluded.
Even after relocating the font-loading to a style block, jQuery persists in attempting to fetch it autonomously.
<style type="text/css">
@font-face {
font-family: 'ArialNarrowBold';
src: url('fonts/ArialNarrowBold.eot');
src: url('fonts/ArialNarrowBold.eot?#iefix') format('embedded-opentype'),
url('fonts/ArialNarrowBold.woff') format('woff'),
url('fonts/ArialNarrowBold.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
</style>