ImageonLoad директива AngularJS

Я использую директиву Imageonload управлять прелоадер для моего изображения загрузки:ImageonLoad директива AngularJS

Directive.js

.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); 
       // usage: <img ng-src="src" image-onload="imgLoadedCallback()" /> 
      }); 
     } 
    }; 
    });

Controller.js

$scope.imgLoadedCallback=function(map){ 

     map.flag=false; 

    };

Viewer.html

<img src="images/loading_bar.gif" ng-show="mapAllDataSets[$index].flag" > 


<img class="img-responsive center-block" ng-src="{{mapAllDataSets[$index].src}}" image-onload="imgLoadedCallback(mapAllDataSets[$index])" >

Это w orking fine, пока я не пытаюсь отображать одно и то же изображение снова подряд.

Если я назову то же изображение, мой прелоадер не скроет. Я не понимаю, почему.

источник

2015-12-28 azelix

могли бы вы сделать (основной, простой) plunker или скрипку и разместить ссылку? Будет легче найти ошибку. – akashrajkn

Из-за изображения кэширования «OnLoad» событие не может стрелять, так что вы можете попробовать добавить следующие строки в код:

if (element[0].complete) { 
    element[0].load(); 
}

Этот код проверки, если изображение уже загружен и запускает вручную событие onload.

Вот пример кода:

var app = angular.module('app', ['ui.bootstrap']); 
 
app.controller('MyCtrl', function($scope, $log) { 
 

 
    $scope.imgLoadedCallback = function(map) { 
 
    $log.info('imgLoadedCallback'); 
 
    map.flag = false; 
 
    }; 
 

 
    $scope.mapAllDataSets = [ 
 
    {flag: true, src: "http://www.download-free-wallpaper.com/img10/paluegqweqrschoxqqtx.jpg"}, 
 
    {flag: true, src: "http://www.download-free-wallpaper.com/img42/xfokptpwjejkiqsmcatc.jpg"}, 
 
    {flag: true, src: "http://desktop-backgrounds-org.s3.amazonaws.com/free-desktop-high-definition.jpg"}, 
 
    {flag: true, src: "http://hdwallpaperbackgrounds.net/wp-content/uploads/2015/09/Butterfly-Free-Wallpaper-For-Desktop.jpg"}, 
 
    {flag: true, src: "http://theartmad.com/wp-content/uploads/2015/06/Nice-Wallpapers-For-Desktop-Free-Download-2.jpg"}, 
 
    {flag: true, src: "http://www.download-free-wallpaper.com/img10/paluegqweqrschoxqqtx.jpg"}, 
 
    {flag: true, src: "http://www.download-free-wallpaper.com/img42/xfokptpwjejkiqsmcatc.jpg"}, 
 
    {flag: true, src: "http://desktop-backgrounds-org.s3.amazonaws.com/free-desktop-high-definition.jpg"}, 
 
    {flag: true, src: "http://hdwallpaperbackgrounds.net/wp-content/uploads/2015/09/Butterfly-Free-Wallpaper-For-Desktop.jpg"}, 
 
    {flag: true, src: "http://theartmad.com/wp-content/uploads/2015/06/Nice-Wallpapers-For-Desktop-Free-Download-2.jpg"}, 
 
    ]; 
 

 
}) 
 

 
.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); 
 
     // usage: <img ng-src="src" image-onload="imgLoadedCallback()" /> 
 
     }); 
 
     if (element[0].complete) { 
 
     element[0].load(); 
 
     } 
 
    } 
 
    }; 
 
});

<!DOCTYPE html> 
 
<html ng-app="app"> 
 
<head> 
 
    <meta charset="utf-8" /> 
 
    <title>AngularJS</title> 
 
    <script data-require="[email protected]" src="https://code.angularjs.org/1.4.8/angular.js" data-semver="1.4.8"></script> 
 
    <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.3.js"></script> 
 
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"> 
 
    <link href="styles.css" rel="stylesheet"> 
 
    <script src="app.js"></script> 
 
</head> 
 
<body ng-controller="MyCtrl"> 
 
    <div class="container"> 
 
    <h2>AngularJS: load directive</h2> 
 
    <div ng-repeat="map in mapAllDataSets"> 
 
     <img class="center-block" src="http://www.onlinedesignteacher.com/images/loadingbar.gif" ng-show="map.flag" > 
 
     <img class="img-responsive center-block" 
 
     ng-src="{{map.src}}" 
 
     image-onload="imgLoadedCallback(mapAllDataSets[$index])"> 
 
     <p>picture {{$index}}</p> 
 
    </div> 
 
    </div> 
 
    <pre>mapAllDataSets = {{mapAllDataSets | json}}</pre> 
 
</body> 
 
</html>

источник

2015-12-28 09:41:18 beaver

Это не сработало для меня, я сделал что-то вроде: // проверить, не отличается ли новое изображение.src от фактического изображения src, а затем в зависимости от этого условия я скрываю или показываю прелоадер. Я уверен, что есть лучшее решение для этого более угловатого, как решение – azelix

К сожалению :(Может быть, есть какая-то проблема в другой части вашего кода, которую вы не разделяли – beaver

ImageonLoad директива AngularJS

ответ

Смежные вопросы