your server is sending wrong headers; do a search about
Cache-Control
,Expires
,Etag
andPragma
and set them to cache your images instead of downloadchrome is buggy or it intentionally downloads the image twice. for example setting
display:none
too early may cause the problem, useposition:absolute;left:-100000px;
insteadyour developer tools is set to disable cache (click on the gear icon, then uncheck
General > Disable cache (while DevTools is open)
)
How to use javascript to preload images
-
16-07-2023 - |
Frage
I have looked at a number of SO questions on how to preload images, I have created a function
$(images).each(function () {
var img = new Image();
img.src = this;
$(img).appendTo('body').css('display', 'none');
});
Which appends the images to the dom. However when I add a product to my cart, (the minicart will contain the images which have been preloaded), chrome still produces a request on that minicart image even though it has been preloaded (I can see the image in chrome developer tools). How do I get chrome to use the image which has already been loaded instead of getting another one from the server?
Lösung
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow