Непривлекательная загрузка многих изображений с использованием угловых директив, таких как ngShow и ngHide

0

Я использую Angular некоторое время, и я всегда использую ngShow, ngHide, ngIf и т.д.

Проблема, с которой я всегда сталкивалась при использовании этих директив для отображения и скрытия изображений, - это одна секунда сразу после того, как директива устанавливает значение true или false, а изображения еще не загружены. Страница просто висит на месте, а затем изображения появляются в маленьких кусках.

Есть ли способ отслеживать, были ли все изображения в представлении получены с сервера и закончены ли рендеринг? Таким образом, я мог бы использовать загрузчик или что-то еще, пока все изображения не будут готовы на 100%.

Теги:
ng-show
loading
ng-hide

1 ответ

0
Лучший ответ

Если вы хотите выполнить некоторый код, когда изображение полностью загружено, вы можете использовать настраиваемую директиву в AngularJS, например:

app.module['myApp'].directive('imageOnload', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            element.bind('load', function() {
                // call the function that was passed
                scope.$apply(attrs.imageOnload);


            });
        }
    };
});

Применение:

<img ng-src="src" image-onload="customFonction()" />
Поделиться
  • 0
    Так что, если бы я загружал много изображений, скажем, 50+, в режиме ng-repeat или еще чего-нибудь, эта директива была бы масштабируемой?
  • 0
    нет, это создаст 50 событий, которые останутся активными после загрузки. Вы должны использовать .one вместо .bind, чтобы события были уничтожены после одного вызова. Кроме того, связывание не рекомендуется, и вы должны использовать ".on" вместо
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню