javascript - 缩放图像以随着页面加载而增大

Question

我四处寻找解决方案，并遇到了这个问题/答案 Enlarge an image from zero to full size on image load然而，这并没有给我太大的帮助来扩大规模。

到目前为止我拥有的壁橱在下面，它在 JSFiddle 中。 。我试图让我的图像在短时间内扩展/增长。

提前致谢。

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

img {
  height: 300px;
  width: 500px;
  margin: 100px;
  transition: transform 5.5s;
  transform: scaleX(0.5) scaleY(0.5);
}

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<img src="https://static.independent.co.uk/s3fs-public/thumbnails/image/2017/09/12/11/naturo-monkey-selfie.jpg?w968h681">

Answer 1

问题是该类在加载后没有添加到您的图像标记中。

jQuery 未加载到您的页面。

尝试使用 JavaScript

var images = document.getElementsByTagName("img");
var i;

for(i = 0; i < images.length; i++) {
    images[i].className += " loaded";
}

工作演示:https://jsfiddle.net/malithmcr/cewjzdrn/1/