Изменить изображения при наведении указателя поворота с помощью 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)') 

Затем в контроллере у меня есть объект, который содержит пути к изображениям, а также функции, которые переключают изображения при наведении.

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; 
    } 

Это все работает отлично и хорошо на моей местной окружающей среды, но на сервере это veeeerrrrry медленно. Например, 2-3 секунды для переключения изображений.

Так что мой вопрос - есть ли простой способ исправить это? Либо что-то внутри углового или обходного/взлома. Не имеет значения, пока время переключения изображения ускоряется. Или это будет продолжаться медленно, пока я переключаю изображения через JS, как это? В идеале я бы хотел избежать переписывания этого с помощью CSS.

Заранее спасибо.

Answer 1

Hey bro У меня была такая же проблема, и все, что я мог придумать, это предварительная загрузка изображений. Это помогло много. Добавьте небольшой кусок кода 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" 
) 

Answer 2

Я бы рассмотрел возможность оптимизации размеров изображений PNG. Есть инструменты пакетной оптимизации, доступные в Интернете, вот сообщение в блоге, сравнивающее некоторые из них, чтобы начать работу: http://www.sitepoint.com/image-compression-tools/
Возможно, вы можете протестировать оптимизацию нескольких изображений, чтобы увидеть, заметили ли вы изменения?

GL!