3

As part of building a code to copy and paste, we had to use a dom element that we appended text / other dom elements into it, and in the end the result would be code to copy.

However, when appending image elements, the browser always issues a request for the image src.

Is there any way around it?

i.e. 

var img = document.createElement('img');
img.src = 'http://dummy.com';

without the browser firing a request to dummy.com?

The reason I am asking is I have a template, that looks something like this:

<div class="container">
    <div class="items-container">
       <generated tags here>
    </div>
</div>

Where generated tags are with img inside.

I was trying to append the a tags with the image inside and get the HTML so I can give it to the user to use it on their email campaigns.

But I guess it's just not supported.

I ended up adding {{token}} instead of the real html, and then used strings (ugly, but worked)

PiniH
  • 1,901
  • 13
  • 20
  • use base64 code in src it will not fire request. otherwise it will always fire a request – murli2308 May 10 '16 at 09:47
  • @AndreaCasaccia is right, the best answer in this thread should help OP enough, no need to paraphrase. – zoubida13 May 10 '16 at 09:52
  • PiniH - Can you clarify: are you saying you want an img element to *have* a src specified but for the browser to ignore it and not request the image? I don't think you can do that, but if that's what you're asking then this isn't a duplicate of that other question so I'll reopen yours. – nnnnnn May 10 '16 at 09:55
  • oi - I was typing a viable answer and the question got closed :( -- anyway, I was saying: set a different property, not `src`, add a className, and then, elsewhere, make a script to listen for an event, like `window.onload`, and `getElementsByClassName`, then set each element `src` to said property; voila ;) –  May 10 '16 at 10:00
  • The question is approaching the problem in the wrong way in my opinion. If you don't want `src` to be loaded don't use `src`. See @argon comment or @BoltClock comment to the question in the linked thread. – Andrea Casaccia May 10 '16 at 10:02
  • @nnnnnn yea I was looking for it to *have* src and the browser to not issue a request – PiniH May 10 '16 at 11:34
  • This is not a duplicate, at least from the question tagged as duplicate. – Marcos Pérez Gude May 10 '16 at 11:39
  • If you wrap the appended elements inside a container, I think that would prevent loading of the image src? Like so:
    – Ole Haugset May 10 '16 at 12:43
  • That didn't help either, since in order to append anything you have to create a dom element, and when you create an image element, the moment you populate its src field it queries, I guess there is no way around it :/ – PiniH May 10 '16 at 15:34

3 Answers3

1

After some more research, it seems like it's impossible, unless there is a browser API I am missing.

Any new Image tag with src will result in a request going out from the browser, even if it's just in memory, or wrapped in a code block.

PiniH
  • 1,901
  • 13
  • 20
1

You can create HTML5 data-* custom attribute and do this work. See it in this.

You can store image address in data-address custom attribute and when you want to load image, get it and set to src attribute. See my example

var imageSrc = "https://www.w3.org/2008/site/images/w3devcampus.png"

var image = document.getElementById("image");
var srcChange = document.getElementById("srcChange");
var imageLoad = document.getElementById("imageLoad");

srcChange.addEventListener("click", function(){
    image.setAttribute("data-address", imageSrc);
});

imageLoad.addEventListener("click", function(){
    var src = image.getAttribute("data-address");
    image.setAttribute("src", src);
});
<img id="image" src="https://www.w3.org/2008/site/images/logo-w3c-screen-lg" />
<br/>
<button id="srcChange">Change src</button>
<button id="imageLoad">Load image</button>

To test it click on Chnage src button then click on Load image button.

Mohammad
  • 21,175
  • 15
  • 55
  • 84
1

Here we are in 2022, and this is very doable using a native browser API. Use loading="lazy".

Here's an example:

// Create an image
const img = document.createElement('img')
// Set the image to load lazily
img.loading = "lazy"
// Set the src
img.src = "/foo.jpg"

The image will not be downloaded until it's actually been rendered onto the page and has satisfied the browser's condition for when a lazy image should be loaded. More info here.

Note that you must set loading="lazy" before you set the image src. Setting the src attribute and then loading="lazy" will not work—in that case, the browser will immediately download the image. But as long as you set loading="lazy" first, this will work in all major browsers.

zgreen
  • 4,182
  • 1
  • 24
  • 19