Question

I have a problem with a mouseover script. Everything works as it should but I have a small issue that I don’t know how to solve. More precisely, the mouseover script creates a grayscale image hover effect. When the page loads the colored images are showing for a short time (1 second or less) and then the javascript is applied and they are all grayed out which is exactly how things should work.

How can I make it so that the colored images will not appear before the javascript is applied? Basically, I want the grayscale images to appear when the page loads not after. Is it possible?

You can see the script here and the webpage in question here.

Answer 1

I would remove the images from the HTML and load them dynamically.

I would use <a class="placeholder" href=""></a> as placeholders for the <img src="" /> and would style the links to either be hidden or go well with the design.

$('a.placeholder').each(function() {
    var src = $(this).attr('href');
    var image = new Image(); // this is not yet visible in the DOM.
    image.onload = grayscale; // change the grayscale function to accept
                              // event parameters
    image.src = src; // this triggers the onload event which
                                     // grayscales the image
    var dom_image = $('<img />').attr('src', src);
    $(this).replaceWith(dom_image);
});

Of course you have to be doing the above on document ready not on window load.