Helping you build a better website
(and other interesting web stuff)

CSSHTMLJavaScriptjQueryMSSQLMySQLPHPSilvaTechnologiesWordpress
Silva Web Designs - Blog

jQuery – Preload Images

Here is how you can preload images which are needed later (e.g. when a hover is performed). You may notice that when replacing an image on the hover state, you get this horrible flicker, that is because the image is loaded as you hover the element. The below code will load the image on page load and therefore overcome this problem.


$.preloadImages = function() {
  for (var i = 0; i < arguments.length; i++) {
    $("<img />").attr("src", arguments[i]);
  }
}

$.preloadImages(“hover-img-1.jpg”,”hover-image-2.jpg”);

Hope this helps!

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development and web site design. His expertise is WordPress & Magento as well as many other frameworks. Would you like to work with Nathan? Send him an email on [email protected]

It’s good to share

Join the discussion