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

Enlarge an image from zero to full size on image load

本文关键字：图像 放大 全尺寸 加载      更新时间：2023-09-26

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

您可以在图像加载完成后将类添加到图像中，并在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="https://placekitten.com/600/600/">

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

这种方式更可取：

var pics = document.querySelectorAll(".zoom");
for (var i = 0; i < pics.length; i++) {
    pics[i].addEventListener('load', function() {
      this.classList.add("loaded");
    }, false);
}
img {
  transition: transform .5s;
  transform: scale(0,0);  
}
img.loaded {
  transform: scale(1,1);  
}
<img src="https://via.placeholder.com/300x200/00f/fff?text=Dummy-Image" class="zoom">

这可以在图像数量有限的情况下使用：

function imgresize(el) {
  el.classList.add("loaded");
}
img {
  transition: transform .5s;
  transform: scale(0,0);  
}
img.loaded {
  transform: scale(1,1);  
}
<img src="https://via.placeholder.com/300x200/00f/fff?text=Dummy-Image" onload="imgresize(this);">

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

即；

$('img').on('load',function(){
   alert('image loaded');
}
相关文章：