2011-06-26 43 views
8

我使用jQuery ajax請求來抓取和解析輔助頁面上的HTML .. 查看Chrome和FF的網絡面板,我注意到它會加載那裏的圖像也是如此 - 但只有當我在'success'回調中使用$(data)加載結果時。防止圖像在非DOM上加載jQuery AJAX解析

內容沒有加載到當前頁面的DOM中,所以我真的很困惑爲什麼會發生這種情況。

但無論如何,簡單地問,有沒有辦法來防止這種情況發生?我需要從結果中獲取信息,但它從不碰到主要的DOM。會阻止圖像加載的腳本,直到視圖在這裏工作,還是永遠不會激發加載的元素?請注意,這是針對userscript應用程序的,因此我無法控制目標HTML。

謝謝!

回答

7

原因爲什麼發生這種情況是隻要你創建一個src性的圖像,該圖像將被加載。例如:

var image = document.createElement('img'); 
image.src = 'example.png'; 

的圖像是緊接由瀏覽器加載的,然後再將其附加到DOM。實際上這通常是一種優化。例如,它可以用來預載稍後將要使用的圖像。

由於jQuery將HTML字符串構建爲DOM結構,因此它以與上面的代碼片段幾乎相同的方式創建img元素。當圖像元素出現時,甚至在它被附加到DOM之前,該文件就從服務器加載。

最簡單的解決辦法是從HTML移除所有img標籤你追加前:

html = html.replace(/<img\b[^>]*>/ig, ''); 

如果這不是一種選擇,你需要的img元素,你可以重命名src屬性別的東西,或者如果你不需要它們,就刪除它們。

+0

我喜歡這個解決方案;我能夠很快地用另一個標識符替換'src'屬性文本。 – Morgon

1

在將其加載到DOM之前,您可以從返回的字符串中查找並刪除所有圖像標記。

這是HTML的圖像正則表達式:

<[iI][mM][gG][a-zA-Z0-9\s=".]*((src)=\s*(?:"([^"]*)"|'[^']*'))[a-zA-Z0-9\s=".]*/*>(?:</[iI][mM][gG]>)* 
+0

感謝您的答覆......但問題是,我真正需要的那些圖像標籤(其它標籤中,它不是隻是)!更何況字符串提取似乎是非常密集和浪費。如果沒有完全加載所有內容,是否真的沒有辦法在目標上使用jQuery? – Morgon

0

您的問題是將響應文本加載到jQuery元素中($(data))。這實際上爲加載的內容創建了一個DOM,即使您沒有將它添加到「主」DOM。

你應該做的就是將這些文本放在jQuery之外,並使用正則表達式在文本級別處理它,或者將其加載到XML文檔中,並使用各種可用的XML方法對其進行查詢。

如果你想使用jQuery和停止加載,你可以嘗試閱讀這裏:Javascript: Cancel/Stop Image Requests

+0

我很感興趣的XML解決方案。你有任何代碼能夠更好地解釋這一點嗎?通過jQuery簡單傳遞消毒的響應是否有任何好處? – Morgon