Question

我正在随机放置一个气泡图像，我想通过将图像从零放大到完整尺寸来模拟制作气泡的效果。我正在使用CSS transform:scale();，但我希望在图像加载时触发动画。

Answer 1

您可以在完成加载后为图像添加一个类，并在CSS中指定正确的transition和transform规则。

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

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

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

Answer 2

以下是两种不需要jQuery的方法。

这种方式更可取：

＆＃13;

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);
}

＆＃13;

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

＆＃13;

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

＆＃13;

这可以在图像数量有限时使用：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

您可以尝试使用onload()函数执行某些只在加载某些内容时才会发生的任务。

即;

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

在图像加载时将图像从零放大到全尺寸

3 个答案: