Angularjs div पृष्ठभूमि तक प्रतीक्षा करें- छवि

Question

मेरे पास निम्नलिखित ng-repeat है जो $http.post से डेटा प्राप्त करता है और इसे $scope.data में संग्रहीत करता है।

<div ng-repeat="key in [] | range:data.pages"> 
    <div class="pageBackground" id="page_{{ (key+1) }}" ng-style="{'background-image':'url(/images/{{data.id}}/{{(key+1)}}.png)'}"> 
    <!-- some random stuff here --> 
</div> 

सामान्य क्या होता है .pageBackground कक्षा से पहले पृष्ठभूमि छवि स्क्रीन पर करता लोड होगा है। मुझे background-image वास्तव में लोड होने तक दिखाने के लिए कुछ भी नहीं चाहिए लेकिन मैं इसे समझने में सक्षम नहीं हूं।

क्या किसी के पास कोई सुझाव है?

Answer 1

छवि लोड होने तक आप अपने स्टार्टअप फ़ंक्शन में देरी कर सकते हैं।

var img = new Image(); 
    img.onload = function(){ 
    loadData(); 
    }; 
    img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg'; 

फिर html में एक ng-if="imageLoaded" रख दिया और सेट कि loadData समारोह में सच करने के लिए।

Answer 2

मुझे यकीन नहीं है कि आपकी समस्या का वास्तविक समाधान है। this answer में बताया गया है कि Image ऑब्जेक्ट का उपयोग करने के लिए एक कामकाज हो सकता है। एक निर्देश के रूप में उदाहरण के लिए:

angular.module("yourModule").directive("showOnceBackgroundLoaded", [function() { 
    return { 
    restrict: "A", 
    scope: false, 
    link: function (scope, element, attributes) { 
     element.addClass("ng-hide"); 
     var image = new Image(); 
     image.onload = function() { 
     // the image must have been cached by the browser, so it should load quickly 
     scope.$apply(function() { 
      element.css({ backgroundImage: 'url("' + attributes.showOnceBackgroundLoaded + '")' }); 
      element.removeClass("ng-hide"); 
     }); 
     }; 
     image.src = attributes.showOnceBackgroundLoaded; 
    } 
    }; 
}]); 

उपयोग:

<div ng-repeat="key in [] | range:data.pages"> 
    <div class="pageBackground" id="page_{{ (key+1) }}" show-once-background-loaded="/images/{{data.id}}/{{(key+1)}}.png"> 
    <!-- some random stuff here --> 
</div> 

Answer 3

यहाँ एक निर्देश है कि एक पृष्ठभूमि के रूप में अपनी छवि को एम्बेड करता है, और जब तक के बाद छवि के लोड होते ही अपने आप को दिखाने के लिए इंतजार कर रहा है है। आप विभिन्न छवियों (जैसे एनजी-दोहराना के भीतर) उत्पन्न करने के लिए आवश्यक "mysrc" पैरामीटर के अंदर चर शामिल कर सकते हैं।

angular.module('foo', []) 
 
    .directive('myPageBackground', function() { 
 
    return { 
 
     scope: { 
 
     key: '=', // used for ID of the element; if you set the ID externally to the directive you could omit this 
 
     mysrc: '=' // used for the URL of the desired background image 
 
     }, 
 
     template: '<div ng-show="showMe" class="pageBackground" id="page_{{key}}" ng-style="{\'background-image\':\'url({{mysrc}})\'}"></div>', 
 
     link: function(scope) { 
 
     var img = new Image(); 
 
     img.onload = function() { 
 
      scope.showMe = true; 
 
      scope.$apply(); 
 
     }; 
 
     img.src = scope.mysrc; 
 
     } 
 
    } 
 
    });

.pageBackground { 
 
    width: 200px; height: 200px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="foo"> 
 
    <!-- Done with hardcoded values here, just for demo: --> 
 
    <div my-page-background key="'1'" mysrc="'http://placehold.it/200x200'"></div> 
 
    <div my-page-background key="'2'" mysrc="'http://placehold.it/150x150'"></div> 
 
    <div my-page-background key="'3'" mysrc="'http://placehold.it/100x100'"></div> 
 
</div>

Answer 4

आप हमेशा एक ही class="pageBackground" का उपयोग कर रहे हैं, तो आप पृष्ठभूमि छवि हमेशा एक ही है। तुम्हें पता है, छिपा छवि में लोड कर सकते हैं ताकि ब्राउज़र यह कैश:

<img src="url" style="display:none;"/> 

या पृष्ठ लोड पर जावास्क्रिप्ट के साथ प्रीलोड:

var img = new Image(); 
img.src = 'some url'; 

मेरा मानना ​​है कि, उस पोस्ट उपयोगकर्ता बातचीत है, जो निश्चित रूप से होता है के साथ शुरू हो रहा है पृष्ठ लोड होने के बाद, इसलिए छवि पहले से ही ब्राउज़र में बैठती है और जब आप class="pageBackground"

लागू होने पर यह तुरंत दिखाई देगा!

Answer 5

आप एक div के बजाय ngSrc निर्देश का उपयोग कर सकते हैं। इसके अलावा, आप ng-lazy-img जैसे छोटे आलसी लोडिंग छवि लाइब्रेरी का उपयोग करने का प्रयास कर सकते हैं।

मुझे उम्मीद है कि इससे मदद मिलती है!

Answer 6

छवि ऑब्जेक्ट का उपयोग करके यहां एक पूर्ण-कार्य करने वाला उदाहरण है।

function AppCtrl($scope) { 
 
    $scope.images = [{ 
 
    src: 'https://farm4.staticflickr.com/3261/2801924702_ffbdeda927_d.jpg' 
 
    }, { 
 
    src: 'https://farm9.staticflickr.com/8455/8048926748_1bc624e5c9_d.jpg' 
 
    }]; 
 
    angular.forEach($scope.images, function(image) { 
 
    var img = new Image(); 
 
    img.onload = function() { 
 
     $scope.$apply(function() { 
 
     image.loadedSrc = image.src; 
 
     }); 
 
    }; 
 
    img.src = image.src; 
 
    }); 
 
}

.hasSrc { 
 
    color: purple; 
 
    padding: 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app> 
 
    <div ng-controller="AppCtrl"> 
 
    <div ng-repeat="image in images" ng-class="{ hasSrc: !!image.loadedSrc }" style="background-image: url({{image.loadedSrc}})"> 
 
     <h2>THIS IS SOME TEXT BEING USED</h2> 
 
     <p> 
 
     This text is being used for illustration purposes only. 
 
     </p> 
 
    </div> 
 
    </div> 
 
</div>

यह बहुत आसान अपने उद्देश्यों के अनुरूप करने के लिए यह अनुकूल करने के लिए होना चाहिए।

Answer 7

आप कोणीय वादों से मदद ले सकते हैं। अगर छवि को वादा किया गया है तो वादा किया गया है और देखें नहीं।

आप पहले से ही इस लिंक को चेक कर सकते हैं।

preloading-images-in-angularjs-with-promises

धन्यवाद

Answer 8

एक समाधान के लिए यहाँ देखो:

How can I tell when a CSS background image has loaded? Is an event fired?

आप क्या करते हैं आप एक अदृश्य साथी तत्व एक ही छवि लोड पैदा करते हैं। अगर और केवल अगर वह छवि लोड हो गई है (ऑनलोड ईवेंट) तो आप अपना अन्य तत्व दिखाते हैं, उदाहरण के लिए:

<div ng-repeat="key in [] | range:data.pages" ng-init="_imageLoaded={}"> 
    <div ng-show="_imageLoaded[$index]" class="pageBackground" id="page_{{ (key+1) }}" ng-style="{'background-image':'url(/images/{{data.id}}/{{(key+1)}}.png)'}"> 
    <img ng-show="false" src="/images/{{data.id}}/{{(key+1)}}.png" onload="_imageLoaded[$index] = true;" /> 
    <!-- some random stuff here --> 
</div>