CODEWITHSUNDEEP
javascriptcssimage
coder
coder

Reputation: 393

Show Image with Blur Effect

I am looking for render image with blur effect in photo gallery.

For example I have HTML

<div>
 <ul>
  <li>
   <img>
  </li>
  <li>
   <img>
  </li>
  <li>
   <img>
  </li>
  <li>
   <img>
  </li>
</ul>
</div>

Now what happens if image is heavy then it shows blank for corresponding element. I wants to maintain 2 versions of each image blury version and sharp version.

Now I wants till sharp image gets loaded completely show blury image of that image and once sharp image loaded show sharp image.

I can do it with onload event like keep 2 image tags one with blury image and another with sharp and show by default blury one image and on load event of sharp image hide blury one and show sharp one.

I wants to understand best optimal practice to achieve this behavior in smooth way.

Upvotes: 1

Views: 2198

Answers (3)

Wish
Wish

Reputation: 1614

I created this https://jsfiddle.net/j8fnomse/3/

Blur effect you can achieve with css3 filters

.slow {
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px)
}

You load each image separately

var slowImage = new Image();
slowImage.src = slow;
var fastImage = new Image();
fastImage.src = fast;

Once they load, you add them to the DOM, and you can add blur to the slower one.

$(fastImage).load(function(){
    if(!$img.attr("data-loaded"))
        $img.attr("src", slowImage.src).addClass("slow");
});
$(slowImage).load(function(){
    setTimeout(function() { // only to slow things down for demonstration
        $img.attr("src", slowImage.src).removeClass("slow").attr("data-loaded", true);
  }, 2000);
});

You should also check, if the faster image has not loaded first, I do check it with data-loaded attribute. When slower image loads, it adds data-loaded attribute. When slower image loads, it checks, if it has data-loaded attribute. If it has, it wont change the image to faster one.

Upvotes: 2

Mukesh Saini
Mukesh Saini

Reputation: 1498

Instead of keeping 2 image tags, just keep 1 image tag for blurry image in HTML. Then create another image element and set sharp image source using javascript as follows - 

var img= document.createElement('img');
img.src= src;

Now use onload event of this dynamically created image to replace the blurry image in HTML with sharp image.

This way, you won't have 2*n images in photo gallery.

Upvotes: 1

Rayon
Rayon

Reputation: 36609

  • Load lightweight image initially but also keep data-src which will hold the heavy image path in attribute.
  • On window.onload, iterate all the images in the container and load the image whose path is stored in data-src
  • Change the src of the image once large image is loaded.

Try this:

$('#parentElement').find('img').each(function() {
  var img = new Image();
  var elem = $(this);
  img.onload = function() {
    elem.attr('src', this.src);
  }
  img.src = elem.attr('data-src');
});

Upvotes: 0

Related Questions