I am trying to hide an image until it is loaded, and then use the onload method to call a jQuery function that shows it. I use the angular ng-repeat property $index to assign a unique ID to each image div. The $index property works, since all my images have ID's like img0, img1, and so on. My problem is that onload is not passing the angular variable, which contains the unique div ID, to my function. Are angular variables unable to be used inside the onload method? If not, how can I make it so?

<div class="hello" ng-repeat="artist in artists" ng-hide="!artiste">
    <div class="paintings" id="img{({$index})}" style="display:none;">
        <a href="{({ artist.fields.link })}">
            <img src="{({ artist.fields.link })}" onload="showImageDiv(img{({$index})})" />
        </a>

        <h3> {({ artist.fields.title })} </h3>
    </div>
</div>

<script>
     function showImageDiv(imageDivId){   // never receives imageDivId
         $('#' + imageDivId).show();
     };
</script>

I am trying to hide an image until it is loaded, and then use the onload method to call a jQuery function that shows it. I use the angular ng-repeat property $index to assign a unique ID to each image div. The $index property works, since all my images have ID's like img0, img1, and so on. My problem is that onload is not passing the angular variable, which contains the unique div ID, to my function. Are angular variables unable to be used inside the onload method? If not, how can I make it so?

<div class="hello" ng-repeat="artist in artists" ng-hide="!artiste">
    <div class="paintings" id="img{({$index})}" style="display:none;">
        <a href="{({ artist.fields.link })}">
            <img src="{({ artist.fields.link })}" onload="showImageDiv(img{({$index})})" />
        </a>

        <h3> {({ artist.fields.title })} </h3>
    </div>
</div>

<script>
     function showImageDiv(imageDivId){   // never receives imageDivId
         $('#' + imageDivId).show();
     };
</script>

• javascript
• jquery
• html
• angularjs

Share Improve this question Follow edited Jul 2, 2015 at 2:58 ian-campbell asked May 25, 2015 at 15:47 ian-campbellian-campbell 1,66522 gold badges2222 silver badges4242 bronze badges 7

• Why don't you pass this: showImageDiv(this) ? Then use $(this).closest('.paintings').show(); inside handler to target DIV. BTW, why are you setting IDs here, seems superflue to me. But anyway, i'm quite sure there is a better way using the angular logic instead of using jQuery but i'm not an angular developper, so... – A. Wolff Commented May 25, 2015 at 15:53
• That doesn't work. Nothing is getting passed from onload = "this: showImageDiv(this)" to my function. – ian-campbell Commented May 25, 2015 at 16:01
• I am setting IDs because I want the images to be shown in order, one after another. If my function goes simply $('.paintings').show() then the images seem to load all at once or out of order, and they even seem to show before they are finished loading, which doesn't work for me. – ian-campbell Commented May 25, 2015 at 16:05
• onload="showImageDiv(this)" not onload = "this: showImageDiv(this)" – A. Wolff Commented May 25, 2015 at 16:06
• Very interesting, I tried your code and it works. However it loads all the images at once, asynchronously, and they end up being out of order, which is why I am trying to keep things in order by assigning IDs. – ian-campbell Commented May 25, 2015 at 16:10

 |  Show 2 more ments

2 Answers 2

Sorted by: Reset to default 3

It doesn't work this way - attribute onload is not a directive, so its value is not parsed by angular. You could use a custom directive though, for example (assuming there is a "myModule" module defined):

angular.module("myModule").directive("showOnLoad", function() {
    return {
        link: function(scope, element) {
            element.on("load", function() {
                scope.$apply(function() {
                    scope.artist.visible = true;
                });
            });
        }
    };
});

It would set the artist.visible field value to true after the load event. This should work after some changes to the markup:

<div class="paintings" ng-show="artist.visible">
    <a href="{{ artist.fields.link }}">
    <img ng-src="{{ artist.fields.link }}" show-on-load /></a>
    <h3> {{ artist.fields.title }} </h3>
</div>

You should use ng-init instead. Replace

onload="showImageDiv(img{({$index})})"

with

 ng-init="showImageDiv($index)"

And since you are using angular, make use of your controller. Inside your controller, write this:

$scope.showImageDiv = function(index){
 jQuery('#img'+index).show();
}

Update :

You can also make use of ng-show, instead of jQuery:

<img src="{({ artist.fields.link })}" ng-init="showImageDiv($index)" ng-show="img[$index]" />

And in controller:

$scope.img=[];
$scope.showdiv = function(index){
   $scope.img[index] = true;
}