이미지에 대한 Src가 올바르게 설정되지 않았습니다.

Question

class = 'tweetCon'이라는 클래스가있는 div가 있습니다.
각각 하나의 이미지가 포함되어 있으며 이미지 소스가 존재하는지 확인하고 싶습니다. 아무것도하지만 적절한 이미지로 이미지 소스를 변경됩니다하지 않을 경우 내 코드는 다음과 같다 :

$('.tweetimgcon').children('img').each(function() { 
    imageExists($(this).attr("src"), function (exists) { 
     if (exists == true) { 
     } else { 
      $(this).attr("src", "https://pbs.twimg.com/profile_images/2284174758/v65oai7fxn47qv9nectx.png"); 
     } 
    }, function() { 
    }); 
}); 

또한 imageExists 것은() 다음과 같다 :

function imageExists(url, callback,callback2) { 
    var img = new Image(); 
    img.onload = function() { callback(true);callback2(); }; 
    img.onerror = function() { callback(false);callback2(); }; 
    img.src = url; 
} 

이제 문제는 그 사용할 수없는 이미지의 경우 src가 표시되지 않습니다. t을 올바르게 알았지 만 console.log에 의해 이미지의 src를 확인하면 제대로 설정되어 있지만 표시되지 않으며 chrome의 inspect 요소를 사용하면 src가 설정되어 있지 않음을 알 수 있습니다. 누구든지 나를 도울 수 있습니까?

Answer 1

요점은 당신이 jQuery를 콜백 함수 each 당신의 imgExists 콜백 함수 내부 $(this)하지만 을하지 호출하기 때문에, 개체를 가리 키지 않습니다 $(this), 그래서 this 객체가 원래 img 태그를 가리 키지 않습니다!

$('.tweetimgcon').children('img').each(function() { 
    var _this = $(this); 
    imageExists($(this).attr("src"), function (exists) { 
     if (exists == true) { 
     } else { 
      _this.attr("src", "https://pbs.twimg.com/profile_images/2284174758/v65oai7fxn47qv9nectx.png"); 
     } 
    }, function() { 
    }); 
}); 

Answer 2

을 그냥 더 나은 콜백 함수 사용 호출에 대한 약간의 팁을 위해 :

이 솔루션은 아래의 시도, 먼저 객체 참조를 저장해야합니다.

function imageExists(url, cb, ecb) { 
var img = new Image(); 
    img.onload = function() { cb.call(img,true,url); }; 
    img.onerror = function() { ecb.call(img,false,url); }; 
    img.src = url; 
} 

나는 첫 번째 인수로 img을 추가하고 그 다음 this 키워드 대신 창이 될 것입니다.

Testing Bin