WordPress / Web Development Tutorials
(Best WordPress Tutorials)

CSSHTMLJavaScriptjQueryMySQLPHPSilvaTechnologiesWooCommerceWordpress
Silva Web Designs - Blog

jQuery – Preload Images – Prevent Image Flicker / Blinking The First Time You Hover

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");

Simly add all the images you want to preload in the array of $.preloadImages and you should be good to go. Depending on your requirements, you can place this code outside or inside the $(document).ready() code.

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, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well of many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share

Join the discussion

Related Posts

CSS / 8th September 2020

How to create a responsive Pinterest style layout with CSS

Read More Related - How to Import WordPress Posts Including Images From One WordPress Site To Another

Wordpress / 6th August 2020

How to Import WordPress Posts Including Images From One WordPress Site To Another

Read More