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)')

然后在控制器中我有一个对象，其中包含图像的路径，以及在悬停时切换图像的功能。

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秒切换图像。

所以我的问题是 - 有一个简单的方法来解决这个问题吗？有角度的东西或变通/破解。只要图像切换时间加快一点，这并不重要。或者只要我像这样通过JS切换图像，它会继续变慢吗？理想情况下，我希望避免使用CSS重写此内容。

提前致谢。

Answer 1

我会考虑优化PNG图像大小。有在线提供的批量优化工具，这里有一篇博文，比较其中的几个，以帮助您入门：http://www.sitepoint.com/image-compression-tools/您可能可以测试优化几个图像以查看是否发现了变化？< / p>

GL！

使用AngularJS在悬停时更改图像

1 个答案: