Rock B Rock B - 12 days ago 7
jQuery Question

How do I load a blurred images for product first then make it sharp using jquery

I want my images are coming through 'blurred' on page load and only start to clear after maybe 1 or 2 seconds when they get progressively clearer until reaching the correct resolution.

Answer

Try this..

Fiddle is here http://jsfiddle.net/ws53byz6/

Suppose your image is something like below

<img src="https://www.google.co.in/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" id="sampleImage" />

you should set the initial opacity value to less than 1 in our example it is 0.1

CSS

#sampleImage {
    -webkit-animation: sharp 5s; /* Chrome, Safari, Opera */
    animation: sharp 5s;
}

@-webkit-keyframes sharp {
    from {-webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);}
    to {-webkit-filter: none;
  -moz-filter: none;
  -o-filter: none;
  -ms-filter: none;
  filter: none;}
}

@keyframes sharp {
     from {-webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);}
    to {-webkit-filter: none;
  -moz-filter: none;
  -o-filter: none;
  -ms-filter: none;
  filter: none;}
}

no need of any javascript

let me if it is working