Multiple Image Load

Author: Mayank Dixit Desc: This is a fiddle explaining how use jQuery + angular to show a loading sign before an image is completely loaded on the page.

by Mayank Dixit

HTML

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<div ng-app="myApp">
    <div ng-controller="mainCtrl">
        <div class="media_detail_{{$index}} mad" ng-repeat="image in images"></div>
    </div>
</div>
<div id='test'></div>

CSS

div[class*='media_detail']{
    width:100px;
    height:100px;
    background:gray;
    background-size:100% 100%;
    margin:2px;
}

JavaScript

var myApp = angular.module('myApp',[]);
myApp.controller('mainCtrl',function($scope){
    $scope.images = [
        "http://goo.gl/DPo6K7",
        "http://goo.gl/EvgtSD",
        "http://goo.gl/CYoXoH"
    ];

    $(function(){
        var img_arr = [];
        for(i=0;i<$scope.images.length;i++)
        {
            //for loading image
            $('.media_detail_'+i).css('background-image','url(http://goo.gl/4G5Sh5)');
            //temporary image object
            var img = $("<img src='"+$scope.images[i]+"' data-id="+i+">"); 
            $(img).on('load',function(){
                id = $(this).attr('data-id'); 
                url = $(this).attr('src');
                $('.media_detail_'+id).css('background-image','url('+url+')');
                console.log('done'+id);
            });
        }
    });//jQuery
});//controller