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只要我不試圖連續顯示相同的圖像，就可以正常工作。

如果我調用相同的圖像，我的預加載器將不會隱藏。我不明白爲什麼。

來源

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

它沒有爲我工作，我做了這樣的事情： //測試新的image.src是否與實際圖像src不同，然後根據這種情況我隱藏或顯示預加載器。我敢肯定，有更好的解決方案，爲這個更多的angularjs像解決方案 – azelix

對不起:(。也許有一些問題在你的代碼的另一部分，你沒有分享 – beaver

ImageonLoad指令AngularJS

回答

相關問題