.Css() Funktion zurück undefined

Question

zur Zeit habe ich ein Problem in meinem Code-Snippet, wo ich Bild-URL aus CSS-Datei basierend auf Bildcode, wo Bildcode kommt von einer anderen Website und wieder eine andere Funktion nimmt Bild-Code als ein Argument machen es als CSS-Klasse.

auf der CSS-Klasse Basierend CSS-() in jQuery mit der Bild-URL abzurufen, aber wenn sie anfangs Seite lädt es nach einigen Sekunden „undefiniert“ zurückkehrt ist es richtig Bild Urls Rückkehr:

JS Funktion Herstellung Bild-Code als CSS-Klasse:

$scope.placeholderNetworkImage = function(networkBenefitIcon){ 
    var selectorClassName = "."+ networkBenefitIcon; 
    var blnResult = false; 

    if(networkBenefitIcon!=="null" && networkBenefitIcon!=="") 
    { 

     var imagePresent = $(selectorClassName).css('backgroundImage'); 
     console.log("image of url is: "+imagePresent); 
     if (imagePresent == 'none' || imagePresent == null) { 
      blnResult = true; 
     } 
     else 
     { 
      blnResult = false; 
     } 
    } 
    else 
    { 
     blnResult = true; 
    } 
     return blnResult; 
} 

HTML-Code

<div class="media-left"> 
    <ul> 
    <li class="networkBenefitIconLi" ng-repeat="networkBenefitIcon in 
      item.t_css_tariffBenefit.split('|') track by $index | limitTo:3"> 
     <span ng-class="networkBenefitIcon" class="networkBenefitIcon" ng- 
        show="!placeholderNetworkImage(networkBenefitIcon)"> 
      </span> 
     <span class="networkBenefitIcon tickLightGray" ng- 
        show="placeholderNetworkImage(networkBenefitIcon)"> 
      </span> 
    </li> 
    </ul> 
</div> 

Ausgabe:

it was output shown on console here you can find some were image url's and some are showing "undefined"

Bitte helfen Sie mir mit diesem Problem, da es ein sehr großes Leistungsproblem bildet unsere side.please jemand mir sagen, warum war es sogar „undefiniert“ zurückkehrt, obwohl Bild in den CSS vorlag .

Answer 1

Ich denke, Sie haben bereits die Antwort. Warten Sie zuerst, bis das DOM bereit ist! Dann erhalten die URL Hintergrundbild (bearbeitet die Antwort und hinterließ einen Schnipsel Beweis zeigen):

$(document).ready(function() { 
 

 
    function getImageBackgroundUrl ($el) { 
 
    var imgUrl = $el.css('backgroundImage') 
 
    return imgUrl 
 
    } 
 

 
    function doSomething (imgUrl) { 
 
    console.log('imgUrl is', imgUrl) 
 
    } 
 

 
    var images = $('.my-images ul li'); 
 
    $.each(images, function (k, v) { 
 
     var $el = $(v) 
 
     var imgUrl = getImageBackgroundUrl($el)  
 
     doSomething(imgUrl) 
 
    }) 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<style> 
 
.a { 
 
    background-image: url(https://unsplash.it/200/305?2) 
 
} 
 
.b { 
 
    background-image: url(https://unsplash.it/200/305?3) 
 
} 
 
.c { 
 
    background-image: url(https://unsplash.it/200/305?4) 
 
} 
 
</style> 
 
<div class="my-images"> 
 
    <ul> 
 
    <li class="a"></li> 
 
    <li class="b"></li> 
 
    <li class="c"></li> 
 
    </ul> 
 
</div>