2

I am using this plugin "https://github.com/Treri/me-lazyload" to lazy load images in my AngularJS application.

It works only for few images then it is not working.

This is my HTML :- 

<div class="property-tab-content internal-resource">
<div property-details-header="tabData.label"></div>
    <div ng-if="!!media">
        <div class="photos-list">
            <div class="bold" ng-if="!!media.hotel">{{ '_PROPERTY_HOTEL_' | i18n }}</div>
            <div class="floating-box"  ng-repeat="hotel in media.hotel"> 
                <div >
                    <img lazy-src="{{hotel.tnUrl}}"  alt="property-image" animate-visible="true" animate-speed="0.5s"ng-if="hotel.tnUrl">
                </div>
            </div>
            <div class="bold" ng-if="!!media.rooms">{{ '_PROPERTY_ROOMS_' | i18n }}</div>
            <div class="floating-box"  ng-repeat="room in media.rooms"> 
                <div>
                    <img lazy-src="{{room.tnUrl}}" alt="property-image"   animate-visible="true" animate-speed="0.5s" ng-if="room.tnUrl">
                </div>
            </div>
            <div class="bold" ng-if="!!media.features">{{ '_PROPERTY_FEATURES_' | i18n }}</div>
            <div class="floating-box"  ng-repeat="features in media.features"> 
                <div>
                    <img lazy-src="{{features.tnUrl}}" alt="property-image" animate-visible="true" animate-speed="0.5s" ng-if="features.tnUrl">
                </div>
            </div>
            <div class="bold" ng-if="!!media.localarea">{{ '_PROPERTY_LOCAL_AREA_' | i18n }}</div>
            <div class="floating-box"  ng-repeat="localarea in media.localarea"> 
                <div>
                    <img lazy-src="{{localarea.tnUrl}}" alt="property-image" animate-visible="true" animate-speed="0.5s" ng-if="localarea.tnUrl">
                </div>
            </div>
            <div class="bold" ng-if="!!media.meetingspace">{{ '_PROPERTY_MEETINGS_AND_EVENTS_' | i18n }}</div>
            <div class="floating-box"  ng-repeat="meetingspace in media.meetingspace"> 
                <div>
                    <img lazy-src="{{meetingspace.tnUrl}}" alt="property-image" animate-visible="true" animate-speed="0.5s" ng-if="meetingspace.tnUrl">
                </div>
            </div>
        </div>

Working Img tags are like this :-

<img lazy-src="http://starwoodhotels.com/pub/media/430/she430gr.38695_ss.jpg" alt="property-image" animate-visible="true" animate-speed="0.5s" ng-if="room.tnUrl" class="ng-scope ng-isolate-scope" src="http://starwoodhotels.com/pub/media/430/she430gr.38695_ss.jpg" style="background-color: rgb(255, 255, 255); opacity: 1; transition: opacity 0.5s;">

For these tags the image is not visible :-

<img lazy-src="http://starwoodhotels.com/pub/media/430/na430gr5_ss.jpg" alt="property-image" animate-visible="true" animate-speed="0.5s" ng-if="room.tnUrl" class="ng-scope ng-isolate-scope" style="background-color: rgb(255, 255, 255); opacity: 0; transition: opacity 0.5s;">
    </div>  </div>
</div>

For some images the Directive works fine and for some its is not. These Images are generated by same ng-repeat.

halfer
  • 18,701
  • 13
  • 79
  • 158
user3442550
  • 21
  • 1
  • 2
  • Your code seems to be ok. It is obvious that in the second example you provided the image is not shown, the src attribute is missing. The images that are not visible belong to the same `ng-repeat` loop or are from other sections? – Gabriele Ciech Jan 10 '17 at 14:47
  • I realise that this is old, for issues like this, especially when using a binding framework such as AngularJS, it is important to include the data model that is being bound to, when syntax looks good, the next culprit is usually data or bindings. – Chris Schaller Feb 06 '18 at 02:55

0 Answers0