AngularJS में ng-src के लिए छवि लोड की गई घटना

Question

मेरी जैसी छवियां हैं <img ng-src="dynamically inserted url"/>। जब कोई एकल छवि लोड होती है, तो मुझे iScroll ताज़ा () विधि लागू करने की आवश्यकता होती है ताकि छवि को स्क्रॉल करने योग्य बनाया जा सके।

यह जानने का सबसे अच्छा तरीका क्या है जब किसी कॉलबैक को चलाने के लिए एक छवि को पूरी तरह से लोड किया जाता है?

Comments

$ Http रिस्पांस इंटरसेप्टर्स पर एक नज़र डालें । जब आप वादे को हल करते हैं तो आप कॉलबैक को पंजीकृत करने के लिए इसका इस्तेमाल कर सकते हैं

— मार्क मेयर

Answer 1

यहाँ एक उदाहरण है कि इमेज ऑनलोड को कैसे कॉल करें http://jsfiddle.net/2CsfZ/2/

मूल विचार एक निर्देश है और इसे img टैग की विशेषता के रूप में जोड़ते हैं।

जे एस:

app.directive('imageonload', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            element.bind('load', function() {
                alert('image is loaded');
            });
            element.bind('error', function(){
                alert('image could not be loaded');
            });
        }
    };
});

HTML:

 <img ng-src="{{src}}" imageonload />

Comments

विफलता कॉलबैक के बारे में क्या?

— ओलेग बेलौसोव

प्रगतिशील छवि के बारे में क्या?

— गुयेन Longc लॉन्ग

Answer 2

मैंने इसे थोड़ा संशोधित किया ताकि कस्टम $scopeतरीकों को बुलाया जा सके:

<img ng-src="{{src}}" imageonload="doThis()" />

निर्देश:

.directive('imageonload', function() {
        return {
            restrict: 'A',
            link: function(scope, element, attrs) {
                element.bind('load', function() {
                    //call the function that was passed
                    scope.$apply(attrs.imageonload);
                });
            }
        };
    })

आशा है कि किसी को यह बहुत उपयोगी लगता है। धन्यवाद @ मिकाच

doThis()समारोह तो एक $ गुंजाइश तरीका होगा

Comments

यह सही है। मिकैच के समाधान ने मेरे लिए तब तक काम नहीं किया जब तक मैंने $ लागू () का उपयोग नहीं किया।

— जेरेमी थेल

प्रदान किए गए उत्तरों में से यह सबसे अच्छा है। पूरी तरह से किसी भी तरह की लोडिंग की आवश्यकता को समाप्त करता है।

— नोएल बैरन

सेमी-कॉलन लगाने के लिए धन्यवाद ताकि लिंट फट न जाए।

— रिचर्ड

यह मुझे यह त्रुटि देता है: code.angularjs.org/1.4.9/docs/error/$rootScope/…

— पाउलो रॉबर्टो रोजा

Answer 3

@ ओलेग तिखोनोव: बस पिछले कोड को अपडेट किया गया है .. @ मिचैक थैंक्स ..)

app.directive('imageonload', function() {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
        element.bind('load', function() {
            alert('image is loaded');
        });
        element.bind('error', function(){
             alert('image could not be loaded');
        });
    }
  };
});

Comments

बेहतर हो सकता है कि एक 'इमेजोनरोर' निर्देश में आप एक अलग क्रिया कर सकें।

— जॉन कैटमुल

Answer 4

मेरा जवाब:

 var img = new Image();
 var imgUrl = "path_to_image.jpg";
 img.src = imgUrl;
 img.onload = function () {
      $scope.pic = img.src;
 }

Comments

ठीक वही जो मेरे द्वारा खोजा जा रहा था!

— ज़ोहब अली

Answer 5

बस पिछले कोड को अद्यतन किया गया है।

<img ng-src="{{urlImg}}" imageonload="myOnLoadImagenFunction">

और निर्देश ...

    .directive('imageonload', function() {
        return {
            restrict: 'A',
            link: function(scope, element, attrs) {
                element.bind('load', function() {
                    scope.$apply(attrs.imageonload)(true);
                });
                element.bind('error', function(){
                  scope.$apply(attrs.imageonload)(false);
                });
            }
        };
    })

Answer 6

मूल रूप से यह वह समाधान है जिसका मैंने उपयोग किया है।

$ लागू () का उपयोग केवल बाहरी स्रोतों द्वारा सही परिस्थितियों में किया जाना चाहिए।

इसके बजाय लागू का उपयोग करते हुए, मैंने कॉल स्टैक के अंत में अद्यतन करने की गुंजाइश फेंक दी है। के रूप में के रूप में अच्छा काम करता है "गुंजाइश। $ लागू (attrs.imageonload) (सच);"।

window.app.directive("onImageload", ["$timeout", function($timeout) {

    function timeOut(value, scope) {
        $timeout(function() {
            scope.imageLoaded = value;
        });
    }

    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            element.bind('load', function() {
                timeOut(true, scope);
            }).bind('error', function() {
                timeOut(false, scope);
            });
        }
    };

}]);

Comments

" $apply()केवल बाहरी स्रोतों द्वारा उपयोग किया जाना चाहिए " से आपका क्या मतलब है ? मैं पीछा नहीं कर रहा हूँ

— जेनुफ्फा

@genunifafa 'बाहरी स्रोतों' से उनका मतलब गैर-कोणीय कोड है। उदाहरण के लिए यदि आप जेनेरिक जेएस ईवेंट श्रोता का उपयोग उस कोड में कॉल करने के लिए कर रहे हैं जो $ गुंजाइश बदलता है, तो आपको वहां $ लागू का उपयोग करने की आवश्यकता होगी। लेकिन अगर यह एक कोणीय घटना या $ स्कोप फ़ंक्शन है, तो आपको $ लागू होने की आवश्यकता नहीं है क्योंकि $ पचा चक्र पहले से ही कोणीय तरीकों से चल रहा है।

— 17