Change images on hover with AngularJS

Question

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.

Rami Awar · Accepted Answer · 2015-09-13 11:36:54Z

1

Hey bro I had the same problem, and all I could think of doing was preloading the images. That helped alot. Add a small piece of js code which loads asynchronously at the beginning of your document. Like this for example:

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

answered Sep 13, 2015 at 11:36

Rami Awar

82011 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

jmknoll Over a year ago

Thanks you. I had figured this out, but by the time I did so, I had long forgotten about this question. Glad you answered it for anyone else who might run into the same problem in the future. : )

Shehryar Abbasi · Accepted Answer · 2015-05-15 04:08:50Z

0

I would consider optimizing the PNG image sizes. There are batch optimization tools available online, here is a blog post comparing a few of them to get you started: http://www.sitepoint.com/image-compression-tools/
perhaps you can test optimize a couple of images to see if you notice a change?

GL!

answered May 15, 2015 at 4:08

Shehryar Abbasi

3782 silver badges8 bronze badges

Collectives™ on Stack Overflow

Change images on hover with AngularJS

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related