छवियों के अनुरोध किए बिना jQuery में एक HTML स्ट्रिंग लोड करें

Question

क्या कोई HTML स्ट्रिंग लोड करने का कोई तरीका है जिसमें चित्रों का अनुरोध किये बिना jQuery टैग छवियां हैं? मैं कुछ जानकारी निकालने के लिए jQuery ऑब्जेक्ट पर चयनकर्ताओं को चलाने में सक्षम होना चाहता हूं।

var string = $('<p><img src="http://image.url/file.jpg" /></p>'); 
string.find('img'); 

ब्राउज़र http://image.url/file.jpg के लिए एक अनुरोध कर देगा: निम्न उदाहरण ले रहा है। मैं ऐसा करने का एक तरीका खोजने की कोशिश कर रहा हूं लेकिन ब्राउज़र के बिना छवि के लिए अनुरोध कर रहा हूं।

धन्यवाद

Answer 1

आप अपने प्रश्न की सीमाओं के बारे में स्पष्ट होना चाहिए। यदि आपका प्रश्न है: "क्या कोई तरीका है कि आप छवियों को लोड किए बिना किसी भी jQuery ऑब्जेक्ट (जैसे आप कर रहे हैं) में उस सटीक HTML को लोड कर सकते हैं (जैसे आप इसे बदल रहे हैं), तो उत्तर नहीं है। jQuery एक अस्थायी पैरेंट ऑब्जेक्ट बनाता है और आपके HTML को आंतरिक HTML प्रॉपर्टी पर असाइन करता है जो ब्राउज़र को इस HTML को पूरी तरह से पार्स करने का कारण बनता है जो छवि URL लोड करेगा।

इसलिए, यदि आप छवियों को लोड के बिना इस HTML पर चयनकर्ता आपरेशन चलाना चाहते हैं, तो आप कई विकल्प हैं:

1. jQuery के लिए HTML दे रही है, इसलिए उनके .src गुण चले गए हैं या पहले छवि टैग को संशोधित खाली हैं या <img> टैग छवि टैग नहीं हैं या अब मौजूद नहीं हैं।

2. चयनकर्ता संचालन के लिए इसे तैयार करने के लिए अपने HTML को पार्स करने के लिए इस प्रकार के jQuery के अलावा कुछ और उपयोग करें।

अगर आपके पास या ऐसा करने के लिए कोशिश कर रहे हैं कि तुम क्या चयनकर्ता संचालन के साथ कार्य करना चाहते हैं के बारे में थोड़ा और अधिक खुलासा, तो हम शायद अधिक विकल्प का सुझाव सकता है।

Answer 2

आप इस

<img id="imgid" src="" data-src="/path_to_image"> 

की तरह, एक और विशेषता के लिए छवि पथ में जोड़ सकते हैं और जब आप की जरूरत है तो आप data-src साथ src विशेषता बदल सकते हैं। इस

$('#imgid').attr('src',$('#imgid').attr('data-src')); 

Answer 3

की तरह कुछ आप खोज करने के लिए एक XML दस्तावेज का उपयोग कर सकते हैं:

function searchXml(xmlStr, selector) { 
    var parser, xmlDoc; 
    if(window.DOMParser) { 
     parser = new DOMParser(); 
     xmlDoc = parser.parseFromString(xmlStr, "text/xml"); 
    } else { 
     xmlDoc=new ActiveXObject("Microsoft.XMLDOM"); 
     xmlDoc.async = false; 
     xmlDoc.loadXML(xmlStr); 
    } 
    return $(xmlDoc).find(selector); 
} 

console.log(searchXml('<p><img src="http://image.url/file.jpg" /></p>', 'img').attr('src'));​​​​ 

यह देखें कार्रवाई में: http://jsfiddle.net/na9Tt/

ध्यान रखें यह एक XML दस्तावेज, न कि कोई HTML है दस्तावेज़, इसलिए कुछ विशेष प्रकार की खोज जो HTML के लिए विशिष्ट हैं, ठीक उसी तरह काम नहीं कर सकती हैं।

Answer 4

यह केवल क्रोम है जहां तक ​​मुझे पता है, इसे here मिला, स्ट्रिंग मान्य HTML नहीं है, तो उस पृष्ठ पर पहली विधि काम नहीं कर सकती है, दूसरा दूसरा ठीक काम करता है। छवियों के लिए अनुरोध नहीं बनाते हैं और इनलाइन स्क्रिप्ट निष्पादित करने का प्रयास नहीं करते हैं (जो मेरे उपयोग के मामले के लिए सही है - क्रोम एक्सटेंशन पृष्ठभूमि कार्य)।

var doc = document.implementation.createHTMLDocument(""); 
doc.body.innerHTML = htmlString;