Chrome jQuery image request status "pending"

Question

I've never encountered anything like this before, so I'm hoping someone else has and can explain it to me.

I'm working on a site containing some Adsense banners. In order to keep them from showing up on my localhost or any of my test accounts, I created some server-side code to generate and serve an alternative div with a background image from a CSS file. It's a hack of the Labnol.org responsive design code for Adsense.

Anyway, I have a pair of lines in there like this (the div with the ID is an ASP.net control):

sampleImg = $("<div></div>").addClass("sample-ad-320-x-50");
$("#ctl00_Page_Footer_Top_Leaderboard_Sample").append(sampleImg)

In my CSS, I have:

div.sample-ad-320-x-50 {width:  320px;  height:  50px;  background:  URL(../common-images/banner-ad-320-x-50.gif) center center no-repeat #C0FF00;}

The child div itself loads, but I see this in the Resources window within Chrome:

banner-ad-728-x-90.gif /ss2013/common-images GET (failed) Pending jquery-1.9.1.min.js:3 Script 13 B 0 B

49 ms

I can view the image itself in Chrome...but not when it's loaded in a div (or in an image tag, for that matter).

I know the background is there, because it loads fine in Firefox. I also know the background is there because I can copy/paste the link from the Resources window into a browser and see it that way.

I don't know what could possibly be causing this...is this a jQuery thing or a Chrome thing? I suspect it's a Chrome thing.

Answer 1

the url in your css should have single quotes:

div.sample-ad-320-x-50 {width:  320px;  height:  50px;  background:  url('../common-images/banner-ad-320-x-50.gif') center center no-repeat #C0FF00;}