We Keep Coding

Wordpress prevent same image from loading twice

I have wordpress page where I'm loading post images (on page load). If images are removed and loaded again via wp ajax request in my dev. tools I can see that same images are loaded twice. Is it possible to avoid this behaviour and have same images loaded once by different initiators? Or what is the right approach in this case?

Preloading images in Firefox aren't being retrieved from the cache on the same page load

Some context, I am running a script on a website's home page to swap background images on a timer. We decided it would be better to attempt to implement preloading of the images, which prompts the following issue in Firefox:
Preloading images on the first page load will not prevent the browser from loading the image from the original source again instead of the cache. Oddly though, refreshing the page will successfully cause the image to be loaded in from the cache.
The JavaScript that runs on page load takes all of the image URLs, and attempts to preload them via calling (new Image()).src = 'http:// ...'; for each one.
Inspecting the page load revealed that the images would be loaded in on page load, but then the image would also be loaded in again when the slide was revealed.
Test Image Link (SO reputation restrictions): http://i.stack.imgur.com/E9KLM.png
In the image, the images -66.png, -21.png, -63.png, and -83.png were preloaded from the JavaScript, but are then requested again when the slider reveals that slide.
What's also strange is that the bottom images look like they were queued to be loading in since the page was created. Maybe it's because this takes priority over the script that was loaded once the document was ready?
To finish off, if I was to refresh the page and jump to a slide that was preloaded with the images, but never revealed, it is shown to be loaded from the cache like it should have been originally.
My theory is that the original background images are maybe declared to needing to be loaded from the server when the page is first loaded, but aren't actually loaded until the slide is revealed. On document ready, when the javascript preloads the images, they're not cached yet so they need to be loaded from the server. Then a slide is revealed and the browser tells that image that it needs to be loaded as originally declared.
Does anyone know why this situation is occuring? If so, are there any solutions to resolve?
I have an idea that involves adding the image URLs as a data-url attribute instead, and then having javascript preload them and add them as background images at that point, but I haven't tested this yet.

For those interested, we were not able to find a perfect solution for this.
What we did notice, however, is that the images were being pulled again based on their size. The larger the image size, the more likely the image was not fetched from the cache when the image was shown to the user.
We semi-resolved this issue by compressing our background images even further, and then greatly limiting the amount of images preloaded on the first page load. We found that these two steps greatly increased the changes of the images being pulled in through the cache when needed. It also saved more bandwidth and improved page loading times in general by a significant amount.

loading web page images after the page is loaded

In my website (that is for baby names), 40 names are shown in each pages, and each name can have a picture that are uploaded by users.
now that number of names with pictures has increased my pages are very slow. by the way images are loaded from CDN and my concern is only for client side page load time.
first I decided to to put a 1x1 empty gif image as src and load actual images after the page load completes
<img src="x.gif" data-src="the-real-image-src.jpg" class="delayed-load" />
$(window).load(function () {
$('.delayed-load').each(function(){
$(this).attr('src',$(this).data('src'));
});
});
but later I thought that as Images are being indexed by search engines it will have a bad influence on it. so I decided not to change real srcs and just cancel loading images before they start and retry loadin after page loaded. as I researched canceling image load doesn't prevent browser download te image so this one failed too.
I can add Images after page load too but it has the same problem as the first choice (that page source doesn't contain real image links.
what would you suggest to keep it both search engine friendly and also load images after page completion?

Add a width="<value>" and height="<value>" to your img tags (in pixels). This will allow the page text content to render before the images are fully loaded. No javascript required.
<img src="x.gif" width="42" height="60" data-src="the-real-image-src.jpg" />
Note that I assume either you have the same width and height for each image, or you've stored the metric somewhere you can access it on this load.

Image gallery doesn't load at page load, performance issue with purechat

I am using the nivoSlider image gallery on my website, however when the page loads the gallery doesn't appear straight away. And after a little while it loads
Using firebug I have identified it is an issue with including pure chat in my website. If I remove pure chat from my code it loads soon as the page starts. How can I make is so pure chat doesn't affect the load of the image gallery (without removing it from my page)?
With purechat
Without purechat

Javascript loader

I have an image carousel on my page with some fairly small images. the issue is not with the images but with the script itself. I want to display a javascript loader image while the entire plugin is loaded and is ready for action.
when i launch the page, the carousel <li> first display like a normal list, then get formed into the carousel. i want to avoid that and display a loader image while the entire thing is loaded.

try this image loader or you can find more image loaders in the internet, you can run image loader indipendently from what page containing. so it is not a part of carousel.