Enlarge An Image From Zero To Full Size On Image Load

I'm placing images of a bubble randomly and I want to simulate the effect of making the bubble by enlarging the image from zero to full size. I'm using CSS transform:scale(); but I

Solution 1:

You can add a class to the image when it finishes loading, and specify proper transition and transform rules in CSS.

$("img").load(function() {
  $(this).addClass("loaded");
});

img {
  transition: transform 1s;
  transform: scaleX(0) scaleY(0);
}
img.loaded {
  transform: scaleX(1) scaleY(1);
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><imgsrc="http://lorempixel.com/600/600/">

Solution 2:

Here are two ways which doesn't require jQuery.

This way is preferable:

var pics = document.querySelectorAll(".zoom");
for (var i = 0; i < pics.length; i++) {
    pics[i].addEventListener('load', function() {

      this.className += " loaded";

      // use this method if to support newer browsers only//this.classList.add("loaded");

    }, false);
}

img {
  transition: transform .5s;
  transform: scale(0,0);  
}
img.loaded {
  transform: scale(1,1);  
}

<imgsrc="http://lorempixel.com/200/200/"class="zoom">

and this could be used when the amount of images is limited:

functionimgresize(el) {
  el.className += " loaded";
}

img {
  transition: transform .5s;
  transform: scale(0,0);  
}
img.loaded {
  transform: scale(1,1);  
}

<imgsrc="http://lorempixel.com/200/200/"onload="imgresize(this);">

Solution 3:

You can try onload() function to do certain tasks that only happend when something is loaded.

i.e;

$('img').on('load',function(){
   alert('image loaded');
}