html - 使用 AngularJS 在悬停时更改图像

Question

好的，所以我需要在我的 Angular 应用程序中更改鼠标悬停时的图像。然而，由于网站的一些特殊性，通过 css [无需大量额外工作] 更改悬停时的图像并不真正可行，我意识到这本来是最好的方法。

因此，我使用 ng-mouseenter 和 ng-mouseleave 来更改悬停时的图像。

landing.jade

img.share-button(src='images/btn_share.png', ng-click='dropdownShareIcons()')
                img.share-icon-top(src='{{ shareIcons[0].orig }}', data-id='0', ng-mouseenter='colorizeIcons($event)', ng-mouseleave='decolorizeIcons($event)')
                img.share-icon-top(src='{{ shareIcons[1].orig }}', data-id='1', ng-mouseenter='colorizeIcons($event)', ng-mouseleave='decolorizeIcons($event)')
                img.share-icon-top(src='{{ shareIcons[2].orig }}', data-id='2', ng-mouseenter='colorizeIcons($event)', ng-mouseleave='decolorizeIcons($event)')

然后在 Controller 中我有一个包含图像路径的对象，以及在悬停时切换图像的函数。

landing.js

$scope.shareIcons = [
        {orig: 'images/follow_weibo_grey.png', hover: 'images/follow_weibo_colored.png'},
        {orig: 'images/follow_wechat_grey.png', hover: 'images/follow_wechat_colored.png'},
        {orig: 'images/follow_youku_grey.png', hover: 'images/follow_youku_colored.png'},
        ]


    $scope.colorizeIcons = function($event) {
        $event.target.src = $scope.shareIcons[$event.target.dataset.id].hover;
    }

    $scope.decolorizeIcons = function($event) {
        $event.target.src = $scope.shareIcons[$event.target.dataset.id].orig;
    }

这一切在我的本地环境中都运行良好，但在生产服务器上它非常慢。比如，2-3 秒来切换图像。

所以我的问题是 - 是否有解决此问题的简单方法？ Angular 东西或解决方法/黑客攻击。只要图像切换时间加快一点就没关系。或者只要我像这样通过 JS 切换图像，它会继续变慢吗？理想情况下，我希望避免使用 CSS 重写它。

提前致谢。

Answer 1

嘿，兄弟，我遇到了同样的问题，我所能想到的就是预加载图像。这很有帮助。在文档的开头添加一小段异步加载的 js 代码。例如:

var images = new Array()
  function preload() {
    for (i = 0; i < preload.arguments.length; i++) {
      images[i] = new Image()
      images[i].src = preload.arguments[i]
    }
  }
  preload(
    // for (i = 0; i < $scope.members.length; i ++){
    //   return members[i].source + ",";
    // }
    "http://ramiawar.co/pages/speakersPage/pages/team/assets/images/image1.1.jpg",
    "http://ramiawar.co/pages/speakersPage/pages/team/assets/images/image2.1.jpg",
    "http://ramiawar.co/pages/speakersPage/pages/team/assets/images/image3.1.jpg",
    "http://ramiawar.co/pages/speakersPage/pages/team/assets/images/image4.1.jpg",
    "http://ramiawar.co/pages/speakersPage/pages/team/assets/images/image5.1.jpg",
    "http://ramiawar.co/pages/speakersPage/pages/team/assets/images/image6.1.jpg"
  )