Question

我正在使用此插件“https://github.com/Treri/me-lazyload”在我的AngularJS应用程序中延迟加载图像。

它仅适用于少量图像，然后无效。

这是我的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>

工作Img标签是这样的： -

<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;">

对于这些标签，图像不可见： -

<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>

对于某些图像，指令工作正常，而某些图像则不然。这些图像由相同的ng-repeat生成。

使用AngularJS延迟加载图像

0 个答案: