• We’re currently investigating an issue related to the forum theme and styling that is impacting page layout and visual formatting. The problem has been identified, and we are actively working on a resolution. There is no impact to user data or functionality, this is strictly a front-end display issue. We’ll post an update once the fix has been deployed. Thanks for your patience while we get this sorted.

How to speed up image loading in web pages

mooncancook

mooncancook

Platinum Member
Right now I have 3 images (< 200 bytes in size each), and I'm displaying the image using the image tag like this: <image src="Images/Image1.gif"></image>.

Now each images need to display 30 times, so the web page generates 90 <image> tag. When the page loads for the first time, it's requesting and loading 90 images and it takes a little while, even though there are only 3 unique images.

How can I make it load faster? Is there a way I can just load the 3 images and display them as many times as needed?
 
If the URL is the same, it's strange that the page is requesting 90 images separately. Have you verified this with some packet sniffer or logging proxy? Is the server sending a nocache header or something?
 
well when the page loads, the browser status shows something like this: 90 items remaining (download pictures: http://......xxx.png).

also I have different pages that load these same images. When any of these pages loads for the first time the same thing happens. So PageA loads 30 xxx.png, then when I open PageB and it loads these 30 xxx.png again. If I open PageA now, it'll be instantaneous because the page has been cached.

So what is the nocache header?

 
The png file is < 200 bytes, I can't reduce it any smaller with GIF. Some of the graphics are in GIF, some are png.
 
Look up the image object in JavaScript. Been in js ever since nutscrape 2.0. Nice way to preload images for image swapping but also ideal for what you're talking about.

Edit: figured I'd actually be helpful with a link
 
I tried to set the Cache-Control http header in IIS and it didn't work. I think cache is not working because the web page is on a https connection. I ended up creating a CSS class with the background image, and displaying the image using a <span> tag.
 
Is it just me, our isn't this really a problem with the browser and not a problem with the web pages code?

If it's a browser issue, move on with your life. And you really need to do something to verify that the image is being sent 30 times. Sounds like you are trying to resolve the problem without fully diagnosing where the problem is.

Someone mentioned a packet sniffer. Go grab wireshark for free:
http://www.wireshark.org/
 
You must log in or register to reply here.

TRENDING THREADS

Back
Top