How to add image pre-loading? about jquery.blackandwhite HOT 6 CLOSED

Please check the demo http://gianlucaguarini.com/canvas-experiments/jQuery.BlackAndWhite/ to see how to use the preloader. It's really simple 😄

from jquery.blackandwhite.

Thanks Gianluca!

Though I'm still struggling to see how i can accomplish this on a wordpress install?

My code looks pretty similar to the one on the demo page:

$(window).load(function(){

$('.bw-thumb').BlackAndWhite({
    hoverEffect : true, // default true
    // set the path to BnWWorker.js for a superfast implementation
    webworkerPath : false,
    // for the images with a fluid width and height
    responsive:true,
    // to invert the hover effect
    invertHoverEffect: false,
    speed: { //this property could also be just speed: value for both fadeIn and fadeOut
        fadeIn: 200, // 200ms for fadeIn animations
        fadeOut: 800 // 800ms for fadeOut animations
    },
    onImageReady:function(img){
        $(img).parent().animate({
            opacity:1
        });
    }
});

});

I see that you apply css opcaity:0 to the list anchors with the preloader giff as a background image to the list items but cannot see how these are being pre-loaded during the window load?

from jquery.blackandwhite.

sorry I can't get what is the problem.. could you try to explain what you are trying to achieve?

from jquery.blackandwhite.

I'm trying to prevent the coloured images from displaying before the black and white ones. At present they load as the page is still loading scripts so I need a way to hide the colour images until the b&w ones are rendered.

Is this possible?

On 17 Dec 2013, at 20:12, Gianluca Guarini [email protected] wrote:

sorry I can't get what is the problem.. could you try to explain what you are trying to achieve?

—
Reply to this email directly or view it on GitHub.

from jquery.blackandwhite.

.post-thumb a img {
  opacity:0;
  filter:alpha(opacity=0);
}

Try to put the following javascript code outside of the $(window).on('load',...) callback

$('.bw-thumb').BlackAndWhite({
    hoverEffect : true, // default true
    // set the path to BnWWorker.js for a superfast implementation
    webworkerPath : false,
    // for the images with a fluid width and height
    responsive:true,
    // to invert the hover effect
    invertHoverEffect: false,
    speed: { //this property could also be just speed: value for both fadeIn and fadeOut
        fadeIn: 200, // 200ms for fadeIn animations
        fadeOut: 800 // 800ms for fadeOut animations
    },
    onImageReady:function(img){
        $(img).animate({
            opacity:1
        });
    }
});

from jquery.blackandwhite.

Many thanks Gianluca, this helped fix the issue. I also hadn't noticed a problem with my markup where only one of the images was wrapped in in anchor tag. All working now. Grazie!

Marco

from jquery.blackandwhite.