Prevent Double Request When Lazy Loading A Background-image

I'm trying to lazy load a background-image using Javascript and using a callback when the download is complete. I'm using this code var img = new Image(); img.onload = function()

Solution 1:

I solved this by setting a Cache-Control header when transmitting the image files. Apparently images are considered by Safari to expire immediately if you do not specify otherwise, so they are expiring between preload and first use.

You'll probably want to use a Web server directive to change these headers, as suggested where I found the general solution to my problem (jQuery Pre-load Not Caching in Chrome or Safari). Enabling a one-day cache on Apache should look like this:

<FilesMatch "\.(gif|jpeg|jpg|png|svg)$">
    Header set Cache-Control "public, max-age=86400"
</FilesMatch>

That didn't actually work for me in a quick attempt to verify it, but neither did the example in the Apache 2.4 docs so I probably have something else going on.

In my case I happened to be generating original images in a controller, so I ended up setting the headers using a feature of my app's framework (CakePHP 3) before I returned them:

$this->response->cache('-10 seconds', '+40 seconds');

This results in Cake adding three headers to the response:

Last-Modified:Fri,24Jun2016 10:20:14 GMTExpires:Fri,24Jun2016 10:21:04 GMTCache-Control:public,max-age=40

That got me worried about clock differences between the client and the server, but according to the HTTP/1.1 spec:

If a response includes both an Expires header and a max-age directive, the max-age directive overrides the Expires header, even if the Expires header is more restrictive.