Programming Tips - jQuery: Programmatically preload an image

Date: 2012jul4 Update: 2025jul12 Language: javaScript Platform: web Q. jQuery: Programmatically preload an image A. Create and use an Image object in your ready() function:
<script src='js/jquery.js'></script> <script> function preloadImage(url) { (new Image()).src = url; } $(document).ready(function() { preloadImage('images/myimg.jpg'); }); </script>
This will preload https://example.com/images/myimg.jpg when the webpage loads. No html or css is required. Of course, you can change it preload any number of images. Because its done after the page is ready it won't interfere with the normal loading of the page.