부모 요소의 속성을 가진 img src의 값 설정

Question

제품리스트가 있고 jquery가있는 각 li 요소에 li 요소의 img 속성 데이터 - 엄지에 이미지를 표시하고 싶습니다. 즉 img src의 값을 각 li 요소의 data-thumb 값으로 설정합니다. 그러나로드하는 동안 이미있는 ajax-loader.gif를 표시하려고합니다. 누군가 나를 올바른 방향으로 이끌 수 있습니까?

예 :

<li data-id="7" data-thumb="http://test.com/assets/pdc/thumbs/66.png" data-img="http://test.com/assets/pdc/img/66.png" data-country="Australia" data-company="Big Farm" data-app="Tea" data-brand="Big Farm" data-package="500" class="product air-500 cat7"> 
    <img class="tip" data-country="Australia" data-brand="Big Farm" src="assets/img/ajax-loader.gif"> 
</li> 

감사합니다!

Answer 1

이 시도 :

// Loop through all lis with class product 
$('li.product').each(function(){ 
    // grab a reference to the current li 
    var $el = $(this); 
    // get the url from its data-thumb attribute 
    var url = $el.data('thumb'); 
    // create a new Image element to load into 
    var img = new Image(); 
    // load callback for the new image 
    img.onload = function() { 
     // find the first image inside the li 
     // and change its src to the url we just loaded 
     $el.find('img')[0].src = url; 
    } 
    // set the src of our temp Image to start loading 
    img.src = url; 
}); 

의 DOM에 추가되어 있지 않은 새로운 Image 요소를 만들고, 그것으로 당신의 URL을로드하는 코드 뒤에 아이디어. 로드 될 때 내부 <img> URL을 바꿉니다. 따라서 이미지가로드되는 동안 회 전자가 표시되어야하며 실제 이미지 (이제 브라우저의 캐시에서로드 됨)로 대체되어야합니다.

Answer 2

당신은

$('li.product').each(function() { 
    var $this = $(this); 
    $this.find("img").attr("src", $this.data("thumb")) 
});