CODEWITHSUNDEEP
jquerylazy-loading
zamil
zamil

Reputation: 1930

How to show a placeholder image until the secondary image is loaded

I want to show second image when hover the first image The second image path is in data-alt-src

With this function i am swap the src of the img tag to show the second image

var sourceSwap = function () {
    var $this = jqr(this); 
    var newSource = $this.data('alt-src');

    if (newSource != ''){
        $this.css("background-image",$this.attr('src'));
        $this.data('alt-src', $this.attr('src'));
        $this.stop(true, true).css("opacity",".5").attr('src', newSource).animate({
                            opacity: 1
                        }, 1000);

    }

}

But some times the second image take time to load, So when user hovers the fist image the second image will appear broken.

I am using jquery lazy load form loading the images.Loader is showing for the first image. How to show the loader for the second image as well

Upvotes: 0

Views: 1527

Answers (1)

Denis Ryabov
Denis Ryabov

Reputation: 1350

Try to load second image to browser's cache using new Image() and swap images in image's load event:

/* var $this = $(this), ... */
var img = new Image();
img.onload = function(){/*...*/ $this.attr('src', newSource); /*...*/};
img.src = newSource;

Upvotes: 2

Related Questions