img src的設置值與父元素的屬性

我有一個產品的列表，並在每個li元素與jquery我想顯示圖像的屬性data-thumb在img內的li元素。即將img src的值設置爲每個li元素中data-thumb的值，但在加載時，我想顯示已經存在的ajax-loader.gif。有人能帶領我走向正確的方向嗎？img src的設置值與父元素的屬性

例如：

<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>

謝謝！

來源

2013-01-04 user1937021

試試這個：

// 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元素，您的網址加載到它背後的理念。當它被加載時，請替換內部網址<img>。因此，微調器應該在圖像加載時顯示，然後應該用實際圖像替換（現在從瀏覽器的緩存中加載）。

來源

2013-01-04 18:49:58 bfavaretto

+1：我會刪除我的答案贊成這一之一。 – JFK

哇，完美的工作，希望我能更好地理解它，你介意解釋一下代碼嗎？非常感謝！ – user1937021

好的，我現在好了，謝謝，只是幾件事情。爲什麼你必須在el變量之前放置一個$？爲什麼在這行代碼中$ el.find（'img'）[0] .src = url;你必須包含[0]嗎？謝謝！ – user1937021

你可以做

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

來源

2013-01-04 18:57:25 JFK

...被刪除（或離開，如果它爲別人工作） – JFK

這個作品太配偶，謝謝！ – user1937021

img src的設置值與父元素的屬性

回答

相關問題