जावास्क्रिप्ट सेट img src

Question

मैं शायद कुछ आसान याद कर रहा हूं, लेकिन जब आप पढ़ते हैं तो यह बहुत कष्टप्रद होता है। मेरे पास ऐसी छवियां हैं जिन्हें गतिशील रूप से उत्पन्न पृष्ठ के दौरान कई बार दोहराया जा सकता है। तो स्पष्ट बात यह है कि इसे पहले से लोड करें और उस एक चर को स्रोत के रूप में हर समय उपयोग करें।

var searchPic;
function LoadImages() {
    searchPic = new Image(100,100);
    searchPic.src = "XXXX/YYYY/search.png";
    // This is correct and the path is correct
}

तब मैंने छवि का उपयोग करके सेट किया

  document["pic1"].src = searchPic;

या

  $("#pic1").attr("src", searchPic);

हालांकि, छवि FireBug में ठीक से सेट नहीं किया जाता है जब मैं छवि क्वेरी मैं [object HTMLImageElement]के रूप में srcछवि के

IE में मुझे मिलता है:

http://localhost:8080/work/Sandbox/jpmetrix/[object]

Comments

यह stackoverflow.com/questions/4459379/…

— संदीप अमरनाथ

Answer 1

आपको इसका उपयोग करते हुए src सेट करना चाहिए:

document["pic1"].src = searchPic.src;

या

$("#pic1").attr("src", searchPic.src);

Answer 2

शुद्ध जावास्क्रिप्ट imgटैग और add attributesमैन्युअल बनाने के लिए ,

var image = document.createElement("img");
var imageParent = document.getElementById("body");
image.id = "id";
image.className = "class";
image.src = searchPic.src;            // image.src = "IMAGE URL/PATH"
imageParent.appendChild(image);

---

में src सेट करें pic1

document["#pic1"].src = searchPic.src;

या getElementById के साथ

document.getElementById("pic1").src= searchPic.src;

इसे संग्रहीत करने के लिए j-Query,

$("#pic1").attr("src", searchPic.src);

Comments

document.getElementById ( "pic1") # बिना

— जाएनलुका Demarinis

Answer 3

छवि निर्माता के उदाहरण कहीं भी उपयोग करने के लिए नहीं हैं। आप बस सेट src, और छवि preloads ... और यह है, शो खत्म हो गया है। आप वस्तु को त्याग कर आगे बढ़ सकते हैं।

document["pic1"].src = "XXXX/YYYY/search.png"; 

वही है जो आपको करना चाहिए। आप अभी भी छवि निर्माणकर्ता का उपयोग कर सकते हैं, और onloadअपने हैंडलर में दूसरी क्रिया कर सकते हैं searchPic। इससे पहले कि आप srcअसली imgवस्तु पर सेट हो जाए, यह सुनिश्चित हो जाता है कि छवि लोड हो गई है ।

इस तरह:

function LoadImages() {
    searchPic = new Image();
    searchPic.onload=function () {
        document["pic1"].src = "XXXX/YYYY/search.png";
    }
    searchPic.src = "XXXX/YYYY/search.png"; // This is correct and the path is correct
}

Comments

अगर आप src को onload () में सेट करते हैं, तो आपको एक अनंत लूप मिलता है, जो सर्वर को हथौड़े से मारता है अर्थात जब src को लोड किया गया होता है तो इसे लोड कहते हैं।

— डेविड न्यूकॉम्ब

कुछ और गलत हो रहा है क्योंकि लोड ईवेंट केवल एक बार आग लगा सकता है। आप स्रोत को उसी छवि पर सेट करके फिर से फायर नहीं कर सकते।

— ब्रेटन

आप सही हैं, अन्य एसओ लेख हैं जो अजीब कैशिंग समस्याओं के बारे में बात करते हैं जब "XXXX / YYYY / search.png" एक वेब कैमरा पिक या कुछ है जो सर्वर साइड पर बदलता है। उन्होंने सुझाव दिया कि हम लिंक को "XXXX / YYYY / search.png? T = <thedate>" में बदलते हैं। आपका समाधान सबसे अच्छा और साफ था इसलिए मैंने दोनों को मिला दिया और इसने सर्वर को अंकित कर दिया।

— डेविड न्यूकॉम्ब

@DavidNewcomb Yikes! यह एक मुश्किल है। उस स्थिति में, मुझे लगता है कि मैं नई छवि () भाग को खोदूंगा, और इसके बजाय दो वास्तविक डोम चित्र हैं- एक डबल बफर की तरह। छिपाना image1, image2 छुपाना। अंतराल अंतराल में: image1 पर src सेट करें, और image1.onload में, 1 दिखाएं, छिपाएं 2. इंटरवल फायर: image2 पर src सेट करें। Image2.onload में, 2 दिखाएँ, Hide 1. प्रतीक्षा करें, अंतराल आग: image1 पर src सेट करें। image1.onload में, शो 1, 2- छुपाना आदि आदि ...

— Breton

Answer 4

इसके अलावा, इसे हल करने का एक तरीका यह है कि आप document.createElementअपने html img का उपयोग करें और इसकी विशेषताओं को इस तरह सेट करें।

var image = document.createElement("img");
var imageParent = document.getElementById("Id of HTML element to append the img");
image.id = "Id";
image.className = "class";
image.src = searchPic.src;
imageParent.appendChild(image);

टिप्पणी : एक बिंदु यह है कि जावास्क्रिप्ट समुदाय अभी डेवलपर्स को दस्तावेज़ चयनकर्ताओं का उपयोग करने के लिए प्रोत्साहित करता है querySelector, getElementByIdऔर getElementsByClassNameदस्तावेज़ के बजाय ["pic1"]।

Answer 5

document["pic1"].src = searchPic.src

कार्य करना चाहिए

Answer 6

आप एक पूरी नई छवि बनाने की जरूरत नहीं है ... src विशेषता बस एक स्ट्रिंग मान लेता है :-)

Comments

यदि पृष्ठ को जावास्क्रिप्ट का उपयोग करके गतिशील रूप से उत्पन्न किया जाता है, तो आप पृष्ठ को लोड होने पर डाउनलोड की गई छवि चाहते हैं ताकि आपको पहली बार जब आप कोई ऐसा तत्व बनाते हैं जिसमें आपको इसकी आवश्यकता होती है तो कष्टप्रद विलंब न हो। यही इमेज ऑब्जेक्ट बनाने का कारण है।

— tvanfosson 12

आप सही हैं, मैं अपने उत्तर में बहुत सटीक नहीं था। मेरे कहने का मतलब यह है कि src विशेषता एक स्ट्रिंग लेती है, और Imageपहले से ही बनाने के कैशिंग लाभ के बारे में पूरी तरह से भूल गई । धन्यवाद!

— जॉरनबी

Answer 7

आपको सेट करने की आवश्यकता है

document["pic1"].src = searchPic.src;

सर्चपिक ही आपकी छवि है (), आपको आपके द्वारा निर्धारित src को पढ़ना होगा।

Answer 8

आपकी src प्रॉपर्टी एक ऑब्जेक्ट है क्योंकि आप src एलिमेंट को पूरी इमेज के लिए सेट कर रहे हैं जो आपने जावास्क्रिप्ट में बनाया है।

प्रयत्न

document["pic1"].src = searchPic.src;

Answer 9

वाह! जब आप का उपयोग करें srcतो srcकी searchPicभी इस्तेमाल किया जाना चाहिए।

document["pic1"].src = searchPic.src

बेहतर लग रहा है

Answer 10

यदि आप WinJS का उपयोग कर रहे हैं, तो आप फ़ंक्शन के srcमाध्यम से बदल सकते हैं Utilities।

WinJS.Utilities.id("pic1").setAttribute("src", searchPic.src);