Okay, so I need to change images on hover in my Angular app. However, due to some peculiarities of the site, it wasn't really feasible to change images on hover via css [without a ton of extra work], which would have been the best way, I realize.
So instead, I'm using ng-mouseenter and ng-mouseleave to change the images on hover.
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)')
Then in the controller I have an object which contains the paths to the images, and the functions which switch images on hover.
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;
}
This all works fine and well on my local environment, but on the production server it is veeeerrrrry slow. Like, 2-3 seconds to switch the images.
So my question is - is there an easy way to fix this? Either something within angular or a workaround/hack. Doesnt really matter as long as image switch time is sped up a bit. Or is it going to continue to be slow as long as I'm switching images via JS like this? Ideally, I would like avoid rewriting this using CSS.
Thanks in advance.
