Angular.js를 사용하여 영상을 사전 로드하는 가장 좋은 방법

Angular.js를 사용하여 영상을 사전 로드하는 가장 좋은 방법

Angular의 ng-src는 내부적으로 이미지를 프리로드할 때까지 이전 모델을 유지합니다.각 페이지의 배너에 다른 이미지를 사용하고 있습니다.루트를 바꿀 때는 메인 뷰를 변경하고 헤더 뷰를 그대로 유지하며 bannerUrl 모델이 있을 때 변경합니다.

이로 인해 새로운 배너 이미지가 로드되는 동안 이전 배너 이미지가 표시됩니다.

아직 지시가 없는 것에 놀랐지만, 그것을 구축하기 전에 의논을 하고 싶었습니다.

제가 하고 싶은 것은 커스텀 애트리뷰트에 배너 모델을 갖는 것이라고 생각합니다.예를 들어 다음과 같습니다.

<img preload-src="{{bannerUrl}}" ng-src="{{preloadedUrl}}">

그럼 $scope.bannerUrl의 변경을 주시하고 변경 즉시 ng-src를 로더 스피너로 교체하여 임시 img dom 요소를 만들고 preload-src에서 이미지를 프리로드하여 preloadUrl에 할당합니다.

예를 들어 갤러리에서 여러 이미지를 처리하는 방법을 생각해야 합니다.

입력하신 분 있나요? 아니면 기존 코드를 알려주실 수 있나요?

github에서 background-image를 사용하는 기존 코드를 보았습니다만, 앱의 응답성이 뛰어나고 background-image를 사용할 수 없기 때문에 동적인 높이/너비가 필요하기 때문에 사용할 수 없습니다.

감사해요.

지시문에 2개의 URL이 있는 것은 너무 복잡한 것 같습니다.저는 다음과 같은 지침을 작성하는 것이 더 좋다고 생각합니다.

<img ng-src="{{bannerUrl}}" spinner-on-load />

그리고 지시가 볼 수 있는 건ng-src이미지가 로드될 때까지 스피너를 사용하여 visibility:false를 설정합니다.예를 들어 다음과 같습니다.

scope: {
  ngSrc: '='
},
link: function(scope, element) {
  element.on('load', function() {
    // Set visibility: true + remove spinner overlay
  });
  scope.$watch('ngSrc', function() {
    // Set visibility: false + inject temporary spinner overlay
  });
}

이 방법으로 요소는 표준 img와 매우 비슷하게 동작합니다.ng-src속성, 약간의 추가 동작을 볼트로 고정합니다.

http://jsfiddle.net/2CsfZ/47/

관심 있는 분은 이쪽이 최종 해결책입니다.나는 트위터 부트스트랩을 사용한다.따라서 모든 이미지에 "fade" 클래스를 추가하고 이미지 로드 시 페이드인/페이드아웃 지시로 클래스 "in"을 전환합니다.

angular.module('myApp').directive('imgPreload', ['$rootScope', function($rootScope) {
    return {
      restrict: 'A',
      scope: {
        ngSrc: '@'
      },
      link: function(scope, element, attrs) {
        element.on('load', function() {
          element.addClass('in');
        }).on('error', function() {
          //
        });

        scope.$watch('ngSrc', function(newVal) {
          element.removeClass('in');
        });
      }
    };
}]);

<img img-preload class="fade" ng-src="{{imgSrc}}">

작업 예: http://ishq.org

원하는 경우 이미지 실패 및 이미지 로더를 지시문 속성으로 통과시킬 수 있습니다.

myApp.directive("mySrc", function() {
    return {
      link: function(scope, element, attrs) {
        var img, loadImage;
        var IMAGE_LOAD="123.jpg";
        var IMAGE_FAIL="123.jpg";
        img = null;

        loadImage = function() {

          element[0].src = IMAGE_LOAD;

          img  = new Image();
          img.src = attrs.mySrc;

          img.onload = function() {
            element[0].src = attrs.mySrc;
          };
          img.onerror=function ()
          {
              element[0].src = IMAGE_FAIL;
          }
        };

        loadImage();


      }
    };
  });

저는 이것이 가장 우아한 해결책이라고 생각합니다.지시가 실제로 스피너를 만들고 자동으로 제거하기 때문입니다.

app.directive('spinnerLoad', [function spinnerLoad() {
    return {
        restrict: 'A',
        link: function spinnerLoadLink(scope, elem, attrs) {
            scope.$watch('ngSrc', function watchNgSrc() {
                elem.hide();
                elem.after('<i class="fa fa-spinner fa-lg fa-spin"></i>');  // add spinner
            });
            elem.on('load', function onLoad() {
                elem.show();
                elem.next('i.fa-spinner').remove(); // remove spinner
            });
        }
    };
}]);

html은 다음과 같습니다.

<img ng-src='{{imgUrl}}' spinner-load />

주의: 여기에 설명된 대로 작동하려면 글꼴을 사용해야 합니다.

^^를 공유하기 위해

 //css
.media-box{
                position: relative;
                width:220px;
                height: 220px;
                overflow: hidden;
            }
            .media-box div{
                position: absolute;
                left: 0;
                top: 0;
            }
            .spinner{
                position: absolute;
                left: 0;
                top: 0;
                background: #CCC url(./spinner.gif) no-repeat center center;
                display: block;
                width:220px;
                height: 220px;
            }
            .feed img.spinner-show{
                visibility: visible;
            }
            .feed img.spinner-hide{
                visibility: hidden;
            }

//html
<div class="media-box">
  <div>
    <img data-ng-src="{{item.media}}" alt="" title="" data-spinner-on-load>
  </div>
</div>

//js
.directive('spinnerOnLoad', function() {
            return {
                restrict: 'A',
                link: function(scope,element){
                    element.on('load', function() {
                        element.removeClass('spinner-hide');
                        element.addClass('spinner-show');
                        element.parent().find('span').remove();
                    });
                    scope.$watch('ngSrc', function() {
                        element.addClass('spinner-hide');
                        element.parent().append('<span class="spinner"></span>');
                    });      
                }
            }
        });

사용하는 대신

element.on('load', function() {});

이미지를 사용하다플러그인이 로드되었습니다.이미지를 비약적으로 고속화합니다.

따라서 최종 코드는 다음과 같습니다.

link: function(scope, element) {
  imagesLoaded(element, function() {

  });
  scope.$watch('ngSrc', function() {

  });
}

img-src가 변경되었을 때 스피너를 표시하는 디렉티브가 있습니다.

<img-with-loading
      img-src="{{src}}"
      spinner-class="{{spinnerClass}}"
/>

코드명: http://jsfiddle.net/ffabreti/yw74upyr/

이미지 프리로더 팩토리를 사용하여 루트 변경 시 이미지를 프리로드하여 해결할 수 있습니다.

// call REST
                    return getContent.get().$promise.then(function(response) {

                                //return response;

                                // preload images from response
                                var imageLocations = [
                                  // put image(s) from response to array
                                  response.PostImage.big[0],
                                ];

                                // check do we have (all) image(s) in array
                                console.log(imageLocations);

                                // return when all images are preloaded
                                return preloader.preloadImages( imageLocations )
                                .then(function() {

                                    //if it was success 
                                    return response;
                                },
                                function() {

                                        //if it failed 
                                    return response;
                                });

                            });

튜토리얼을 완료하려면 여기를 클릭해 주세요.https://www.coditty.com/code/angular-preload-images-on-route-change-by-using-resolve

찾은 간단한 해결책은 새 값을 할당하기 전에 URL을 '/:0'으로 변경하는 것입니다.

$scope.bannerUrl = 'initial value'; 

// When we want to change it
$scope.bannerUrl = '//:0';  // remove the previous img so it's not visible while the new one loads
$scope.bannerUrl = scope.preloadedUrl

언급URL : https://stackoverflow.com/questions/20984183/best-way-to-preload-images-with-angular-js