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

回答

相关问题