কোনও আইএমজি উপাদান তৈরি করার জন্য জাভাস্ক্রিপ্টের সেরা কোডটি

107

আমি জেএস কোডের একটি সহজ বিট তৈরি করতে চাই যা ব্যাকগ্রাউন্ডে একটি চিত্র উপাদান তৈরি করে এবং কিছুই প্রদর্শন করে না। চিত্র উপাদানটি একটি ট্র্যাকিং ইউআরএলকে কল করবে (যেমন সর্বমোট) এবং সহজ এবং মজবুত হতে হবে এবং কেবলমাত্র আইই 6 = <এ কাজ করতে হবে। আমার কাছে কোডটি এখানে:

var oImg = document.createElement("img");
oImg.setAttribute('src', 'http://www.testtrackinglink.com');
oImg.setAttribute('alt', 'na');
oImg.setAttribute('height', '1px');
oImg.setAttribute('width', '1px');
document.body.appendChild(oImg);

এটি করা কি সবচেয়ে সহজ তবে সবচেয়ে মজবুত (ত্রুটি মুক্ত) উপায়?

আমি jQuery এর মতো কাঠামো ব্যবহার করতে পারি না। এটি সরল জাভাস্ক্রিপ্টে থাকা দরকার।

javascript dhtml

— পিট
সূত্র

2

"সেরা" সংজ্ঞা দিন। দ্রুততম? সবচেয়ে সহজ?

— অ্যান্ড্রু হেজেস 18

1

@steveniseki তিনি ব্যবহৃত en.wikipedia.org/wiki/Hungarian_notation

— Iiridayn

82

oImg.setAttribute('width', '1px');

pxশুধুমাত্র সিএসএসের জন্য। হয় ব্যবহার করুন:

oImg.width = '1';

এইচটিএমএল মাধ্যমে একটি প্রস্থ সেট করতে, বা:

oImg.style.width = '1px';

সিএসএসের মাধ্যমে সেট করতে।

মনে রাখবেন যে IE এর পুরানো সংস্করণগুলি সঠিক চিত্র তৈরি করে না document.createElement()এবং কেএইচটিএমএলের পুরানো সংস্করণগুলি কোনও সঠিক ডোম নোড তৈরি করে না new Image(), তাই আপনি যদি পুরোপুরি পিছনের দিকে সামঞ্জস্যপূর্ণ হতে চান তবে:

// IEWIN boolean previously sniffed through eg. conditional comments

function img_create(src, alt, title) {
    var img = IEWIN ? new Image() : document.createElement('img');
    img.src = src;
    if ( alt != null ) img.alt = alt;
    if ( title != null ) img.title = title;
    return img;
}

document.body.appendChildপৃষ্ঠাটি লোডিংয়ের মাঝখানে থাকায় স্ক্রিপ্টটি কার্যকর হতে পারে কিনা সে সম্পর্কেও কিছুটা সতর্ক থাকুন । আপনি ইমেজটি অপ্রত্যাশিত জায়গায় বা আইইজে একটি অদ্ভুত জাভাস্ক্রিপ্ট ত্রুটি দিয়ে শেষ করতে পারেন। আপনার যদি এটিকে লোড-টাইমে যুক্ত করতে সক্ষম হতে হয় (তবে <body>উপাদানটি শুরু হওয়ার পরে ), আপনি এটি ব্যবহার করে শরীরের শুরুতে inোকানোর চেষ্টা করতে পারেন body.insertBefore(body.firstChild)।

এটি অদৃশ্যভাবে করতে গেলেও চিত্রটি সমস্ত ব্রাউজারে আসলেই লোড পেতে আপনি কোনও <div>শরীরের প্রথম সন্তানের হিসাবে পৃষ্ঠাটি একেবারে অবস্থানযুক্ত off োকাতে এবং কোনও ট্র্যাকিং / প্রিলোড চিত্র রাখতে পারেন যা আপনি সেখানে দৃশ্যমান হতে চান না put ।

— bobince
সূত্র

4

new Image()সব পরিস্থিতিতে শুধু সেরা কাজ করবে না ?

— অ্যালেক্সিস উইল্ক

52

var img = new Image(1,1); // width, height values are optional params 
img.src = 'http://www.testtrackinglink.com';

— বাচ্চা
সূত্র

19

var img = document.createElement('img');
img.src = 'my_image.jpg';
document.getElementById('container').appendChild(img);

— মাইকেল এল পেরি
সূত্র

@ আন্ড্রেই ক্রিশ্চিয়ান প্রডান console.logপ্রতিটি জোড় লাইনের মধ্যে ব্যবহার করুন , তাই আপনি ঠিক বুঝতে পারবেন কোন রেখাটি এটি হিমশীতল করছে।

— রডরিগো

12

JQuery:

$('#container').append('<img src="/path/to/image.jpg"
       width="16" height="16" alt="Test Image" title="Test Image" />');

আমি খুঁজে পেয়েছি যে এটি আরও বেশি ভাল কাজ করে কারণ আপনাকে HTML থেকে যে কোনও কিছুই পালানোর বিষয়ে চিন্তা করতে হবে না (যা উপরের কোডে করা উচিত, যদি মানগুলি হার্ড কোডড না করে থাকে)। এটি পড়তে আরও সহজ (জেএস দৃষ্টিকোণ থেকে):

$('#container').append($('<img>', { 
    src : "/path/to/image.jpg", 
    width : 16, 
    height : 16, 
    alt : "Test Image", 
    title : "Test Image"
}));

— ড্যারিল হেইন
সূত্র

24

তিনি বিশেষভাবে কোনও jQuery অনুরোধ করেননি।

— অ্যালেক্স

2

এছাড়াও, কোডে পাঠ্যকে পার্সিং করা অর্থহীন, অকার্যকর এবং সরল আলস্য। যে কেউ এটি পড়েন, এ জাতীয় কাজটি এড়িয়ে চলুন। আমার অর্থ, আপনি যদি ডিওমে আক্ষরিক সন্নিবেশ করিয়ে থাকেন তবে <img ... />তা অভ্যন্তরীণ এইচটিএমএল দিয়ে এটি করুন । আমি কেবল এটি পাই না: /

— এক্সেক্স

7

কেবল সম্পূর্ণতার স্বার্থে, আমি ইনার এইচটিএমএল উপায়টিও ব্যবহার করার পরামর্শ দেব - যদিও আমি এটিকে সেরা উপায়ে ডাকি না ...

document.getElementById("image-holder").innerHTML = "<img src='image.png' alt='The Image' />";

যাইহোক, ইনারএইচটিএমএল এটি খারাপ নয়

— বিন্নি ভিএ
সূত্র

2

আমি 50x50 চিত্রের গ্রিডের জন্য এই পদ্ধতিটি ব্যবহার করছিলাম। আমি যখন উপরোক্ত সংযোজন পদ্ধতিটি চেষ্টা করেছি তখন আমার মৃত্যুদন্ড কার্যকর করার সময়টি 150 মিমি থেকে 2250ms এ চলে গেছে। সুতরাং আমি অন্তর্নিহিত এইচটিএমএল অনেক বেশি দক্ষ চিন্তা করছি।

— নিকোলাস

4

সংক্ষিপ্ততম উপায়:

(new Image()).src = "http:/track.me/image.gif";

— aemkei
সূত্র

2

যদি দস্তাবেজে যুক্ত না করা হয় তবে এটি নিশ্চিত নয় যে চিত্রটি এসআরসি আদৌ আনা হবে (ব্রাউজার-নির্ভর)।

— বোবিনস

1

ব্রাউজারের ডিওএম-এর সাথে সংযুক্ত না থাকলে সেই চিত্রটি আনছে না এমন কারও কি মামলা রয়েছে?

— এন্টোইন 129

2

আমি এটি IE, এফএফ, ক্রোম এবং সাফারিতে পরীক্ষা করেছি — সমস্ত ছবিটি ডিওমে সংযুক্ত না করে লোড করুন। এটি কি পুরানো ব্রাউজারগুলির একটি সমস্যা?

— বেনামে

3

আপনি কি একটি কাঠামো ব্যবহার করতে পারবেন? jQuery এবং প্রোটোটাইপ এই ধরণের জিনিসটি বেশ সহজ করে তোলে। প্রোটোটাইপের একটি নমুনা এখানে:

var elem = new Element('img', { 'class': 'foo', src: 'pic.jpg', alt: 'alternate text' });
$(document).insert(elem);

— swilliams
সূত্র

3

আপনি সহজভাবে করতে পারেন:

var newImage = new Image();
newImage.src = "someImg.jpg";

if(document.images)
{
  document.images.yourImageElementName.src = newImage.src;
}

সাধারণ :)

— নিতিন বানসাল
সূত্র

2

শুধু পুরো এইচটিএমএল জেএস উদাহরণ যুক্ত করতে

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>create image demo</title>
    <script>


        function createImage() {
            var x = document.createElement("IMG");
            x.setAttribute("src", "http://www.iseebug.com/wp-content/uploads/2016/09/c2.png");
            x.setAttribute("height", "200");
            x.setAttribute("width", "400");
            x.setAttribute("alt", "suppp");
            document.getElementById("res").appendChild(x);
        }

    </script>
</head>
<body>
<button onclick="createImage()">ok</button>
<div id="res"></div>

</body>
</html>

— Vaibs
সূত্র

0

অন্যরা যেমন উল্লেখ করেছে যে আপনাকে jQuery এর মতো কাঠামো ব্যবহারের অনুমতি দেওয়া হয়েছে তা হ'ল এটি ব্যবহার করা, কারণ এটি সম্ভবত এটি সর্বোত্তম সম্ভাব্য উপায়ে করবে। যদি আপনাকে কোনও কাঠামো ব্যবহারের অনুমতি না দেওয়া হয় তবে আমি অনুমান করি যে এটি করার সর্বোত্তম উপায়টি ডিওএমের সাথে হেরফের করা (এবং আমার মতে এটি করার সঠিক উপায়)।

— লিয়ান্ড্রো ল্যাপেজ
সূত্র

0

আপনার ইচ্ছামত img ট্যাগের লুপ বা একটি একক ট্যাগ তৈরি করতে আমি এই পদ্ধতিটি অনুসরণ করি

method1 :
    let pics=document.getElementById("pics-thumbs");
            let divholder=document.createDocumentFragment();
            for(let i=1;i<73;i++)
            {
                let img=document.createElement("img");
                img.class="img-responsive";
                img.src=`images/fun${i}.jpg`;
                divholder.appendChild(img);
            }
            pics.appendChild(divholder);

অথবা

method2: 
let pics = document.getElementById("pics-thumbs"),
  imgArr = [];
for (let i = 1; i < 73; i++) {

  imgArr.push(`<img class="img-responsive" src="images/fun${i}.jpg">`);
}
pics.innerHTML = imgArr.join('<br>')
<div id="pics-thumbs"></div>

— জিভিএস আখিল
সূত্র