Browser not redrawing images with updated ng-src on them in an Angular webapp

Question

I was trying to apply a random transform to a couple of divs (thumbs in a image gallery) with jQuery in an Angular application, something like this:

$timeout(function() {
    jQuery('.thumb-item').each(function(){
        $(this).css('transform', 'rotate(' + getRandomArbitrary(-6, 6) + 'deg)');
    });
}, 10);

The transform works. But it’s a multi language site, and by changing the language, it also changes the 'ng-src' attribute of the images.

<slick id="slick-nav" asNavFor="#slick-carousel" arrows="false" ng-cloak>   
    <div class="thumb-item col5-unit" ng-repeat="look in looks">
        <div class="frame-small" ng-click="goToSlide($index)"> 
            <img ng-src="image/quiz/answers/{{ translate( look.src ) }}" alt="">
        </div>
    </div>
</slick>

Even though the ng-src attribute of the images always change (if I check on Chrome DevTools), the rendered images sometimes don't. It's a bit random behaviour, but:

the rendered images seem to always apply when the viewport has a large width (desktop)
if the viewport is narrow, the images usually don't update
if the images don't update when changing the languages, they update on resize (i have no happen only in Chrome (desktop and mobile) and Safari. Firefox is good.
the same image src is set to another <img> element on the same view (the large image of the gallery), and that one always updates correctly. It's exactly the same markup as the small thumb (<img ng-src="image/quiz/answers/{{ translate( look.src ) }}" alt="">).

When I realized it was probably a conflict between Angular and jQuery each trying to manipulate the DOM somehow in their own particular way, I decided to use the ng-style directive:

<slick id="slick-nav" asNavFor="#slick-carousel" arrows="false" ng-cloak>   
    <div class="thumb-item col5-unit" ng-repeat="look in looks" ng-style="{'transform': randomRotate, '-webkit-transform': randomRotate, '-ms-transform': randomRotate }">
        <div class="frame-small" ng-click="goToSlide($index)"> 
            <img ng-src="image/quiz/answers/{{ translate( look.src ) }}" alt="">
        </div>
    </div>
</slick>

and in the controller:

$scope.randomRotate = function(){
    return 'rotate(' + getRandomArbitrary(-6,6) + 'deg)';
}

and I get the same results: images don't update (although their sources do). Actually if I delete the element in ChromeDevTools (after changing language), nothing happens, like it's not rendered or it's behind a bogus element, visible (rendered), with the old source, and for which there's no corresponding element in the markup.

Please help me understand the drudgery behind all this! Thank you.

I'm using Angular-Slick directive.

update

I tried using this trick (got from here) in order to make images redraw:

var thumbItems = document.getElementsByClassName("thumb-item");

for (i = 0; i < thumbItems.length; i++) {
    console.log('for');
    thumbItems[i].style.display='none';
    thumbItems[i].offsetHeight;
    thumbItems[i].style.display='';
}

Now, apparently a little chunk of a few images redraw when changing language. And they redraw completely as I hover them with the cursor.

Maybe digest doesn't execute after changes, if you can add your code in a jsfiddle or something will help to understand — Kalamarico, Jan 29 '16 at 11:03

zok · Answer 1 · 2016-01-29T13:29:37.417

After trying many things - for example, using class, and then, ng-class to add random classes with the transforms rotate rules on them (which lead to a couple of different errors) - I figured out how to solve it (but not exactly why the problem happens):

I just moved the ng-style from the .thumb-item element to the .frame-small element:

<slick id="slick-nav" asNavFor="#slick-carousel" arrows="false" ng-cloak>
    <div class="thumb-item col5-unit" ng-repeat="look in looks">
        <div class="frame-small" ng-click="goToSlide($index)" ng-style="{'transform': randomRotate, '-webkit-transform': randomRotate, '-ms-transform': randomRotate }"> 
            <img ng-src="image/quiz/answers/{{ translate( look.src ) }}" alt="">
        </div>
    </div>
</slick>

Maybe it's an issue about having 'ng-repeat' and 'ng-style' with CSS3 transforms on the same element? And why only on a certain viewport width range? Maybe that's because the element is the column of the foundation grid?

Browser not redrawing images with updated ng-src on them in an Angular webapp

1 Answers1