Javascript 加载时淡入图像

我有一个angular js指令，它在加载图像时替换图像

.directive('imgOnLoad', function() {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
      element.bind('load', function() {
        element[0].src = scope.obj.image_url;
      });
      element.bind('error', function(){
        console.log('failure!');
      });
    }
  };
})

还有我的图像标签

<img src="img/default.png" img-on-load>

这已经足够好了，但是我要在替换默认图像时添加淡入效果。我在想，如果我只是为了这项任务而引入ngAnimate，那就太过分了——它可以通过angular或一些简单的CSS在本地完成吗

感谢您的帮助

试试这段代码

var demo=angular.module'demo'，[]； 指令'imgOnLoad'，函数{ 返回{ 限制：“A”， 链接：函数范围、元素、属性{ 元素。在“加载”时，函数{ ifscope.count==0{ console.logloaded+scope.count+1+时间； setTimeoutfunction{ $'imgID'.addClass'imgInitial'； }, 1000; setTimeoutfunction{ 元素[0]。src=https://dummyimage.com/600x400/F7921E/fff; $'imgID'.addClass'imgAnimate'； $'imgID'。删除类'imgInitial'； }, 3000; scope.count=1； } }; } }; }; I.初始{ 不透明度：0； -webkit过渡：不透明度降低； 过渡：放松； } .有机物{ 不透明度：1； -webkit过渡：不透明度3容易； 过渡：放松； }

---

然后，为元素指定一个不透明度。然后，您可以添加一个类，该类在更改src之前设置不透明度：0，然后在更改src之后删除它以将不透明度返回到1。但是，请注意，这只是在src更改后使用，而不是在图像加载后使用-这是不同的，并且非常依赖于浏览器支持。谢谢Amal！它就快到了，我不希望原始图像突然消失，所以也许我应该考虑将其作为静态背景保留在那里Kurai我已经更新了代码，现在原始图像淡出，并在测试时替换为新的两条注释。根据ng docs在上的用法，bind函数是不推荐使用的，如果在设置源之后不调用元素的unbind，则会导致无限循环