jquery - 獲取由picturefill設置的圖像的src

我使用Scott Jehl's picturefill在我的網站上響應地提供圖像。我的代碼看起來是這樣的：頁面已被Picturefill處理jquery - 獲取由picturefill設置的圖像的src

<div data-picture id="front-image"> 
    <div data-src="image.jpg"></div> 
    <div data-media="(min-width: 600px)" data-src="image-medium.jpg"></div> 
    <div data-media="(min-width: 900px)" data-src="image-large.jpg"></div> 
    <noscript><img src="image.jpg"></noscript> 
</div>

後，代碼如下：

<div data-picture="" id="front-image"> 
    <div data-src="image.jpg"></div> 
    <div data-media="(min-width: 600px)" data-src="image-medium.jpg"></div> 
    <div data-media="(min-width: 900px)" data-src="image-large.jpg"></div> 
    <noscript><img src="image.jpg"></noscript> 
    <img alt="" src="image-large.jpg"> 
</div>

通知在主div的結束，新的img標籤;這是由腳本生成的一個（在這種情況下，因爲我的瀏覽器窗口很大，這是大圖像）。

我想抓住該圖像的src，但是當我在被Picturefill後調用javascript文件這樣做

$(function() { 
    var src = $('#front-image img').attr('src'); 
    // do other stuff with that variable once I have it 
});

，該變種是空的。

我最好的猜測是該文件是'準備好'和js評估之前 Picturefill魔術發生。我如何讓我的代碼等到Picturefill完成其職責，以便我可以從該img標籤獲取src？

[完全不是一個JavaScript這裏的人如此明顯，如果有另一種方式去獲得的SRC或我的猜測是完全錯誤請指正！]

來源

2012-07-16 Eileen

最後我做的第一件事情之一@raminson建議 - 拼接出一塊picturefill腳本（使用matchmedia，在這種情況下的部分），並用它來找出哪些圖像是正確的加載此屏幕大小。

 $("#front-image div").each(function() { 
      var media = $(this).attr("data-media"); 
       if(!media || (matchMedia &&matchMedia(media).matches)){ 
        var imgsrc = $(this).attr("data-src"); 
        // do stuff with the img src 
       } 
      });

來源

2012-07-17 14:46:51 Eileen

上選擇是使用DOMNodeInserted事件，其中插入後觸發一個新的node元素。

$(document).on('DOMNodeInserted', function() { 
    var src = $('#front-image > img').attr('src'); 
})

來源

2012-07-16 22:01:47 undefined

在ie中有效嗎？谷歌說，即不會觸發該事件 – mkoryak 2012-07-16 22:04:09

@mkoryak是的，不幸的是，這個事件只支持現代瀏覽器。 – undefined 2012-07-16 22:04:49

不要挑剔，但是如果在插入他關心的圖像元素之前插入100個其他元素呢？ – mkoryak 2012-07-16 22:09:13

Picturefill非常棒，但我在處理真實圖像方面遇到了一些類似的挑戰。

我最終創建了jquery.pikshur插件，它的功能與picturefill基本相同，但是可以更多地控制元素，包括允許圖像的onLoad事件。

來源

2013-04-20 20:51:10

jquery - 獲取由picturefill設置的圖像的src

回答

相關問題