Loading an image: Ajax vs regular old JavaScript.

Question

I have a jQuery-based "carousel" which switches between multiple sale banners on an e-commerce site. They're each pretty large, and I want the page to load as fast as possible. The first banner is referenced in the HTML, and the others are requested through the JavaScript, roughly like this:

<div class="banner"></div>

Pseudocode for the JavaScript looks like this:

for each banner
    banner.css("background", "url('bannerBackground.jpg'");

So the background images are loading after the DOM is ready with jQuery's $(document).ready(). My question is: is there any advantage to using jQuery's ajax functionality to do this rather than doing it the way I am now?

Answer 1

Browsers can use 2..4 (depends on the browser) requests per subdomain to load data. So after the DOM is ready in the first case banners will be loaded asynchronously (partially). But I wonder what do you mean by loading images using ajax. Ajax is usually used to load some text data. Yes, you can load images using it but only in a some bytes array view. And there is the same restrictions with requests. So I recommend you to use different subdomain for banners (or several domains, e.g. CDN) and use the first approach.
See this article about speeding up the performance of the site from yahoo developers for additional details.