Kevin Powell - Community•15mo ago

lazy-loaded `<image>` in `<symbol>` always loads

the issue is simple: i have an svg with a bunch of <symbol> that have an <image> tag with loading="lazy". all images in the <symbol>s load regardless of <use>ing the <symbol> or not. https://jsfiddle.net/cqugnLb9/ <-- disable the cache in f12 and check the result i even tried the content-visibility rule, but doesn't work. how can i stop this from happening, without javascript?

Edit fiddle - JSFiddle - Code Playground

Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.

112 Replies

ἔρωςOP•15mo ago

without javascript would be extremely useful, since i will be using this for lots of small images (about 200), and dont need that kind of load some of the target devices (cheaper phones and 3+ year old iphones)

Jochem•15mo ago

as far as I can tell, loading isn't a valid attribute for the SVG image element

ἔρωςOP•15mo ago

according to mdn, when inside an html file, the <image> tag is treated as an alias of <img> which has that attribute

Jochem•15mo ago

you mean this note?

Note: The HTML spec defines <image> as a synonym for <img> while parsing HTML. This specific element and its behavior only apply inside SVG documents or inline SVGs.

ἔρωςOP•15mo ago

yes

Jochem•15mo ago

I read that as "you can write <img> or <image> in HTML, and it will work the same. This article doesn't describe that usage, but describes the separate <image> tag used inside of SVG" as in, I could use <image> outside of <svg></svg>, and it will act like an <img> tag, but inside an SVG it acts like the SVG <image> tag which is described in the article

ἔρωςOP•15mo ago

that actually makes a lot of sense oh, well, i guess i have to implement this in javascript

Mirza•15mo ago

loading="lazy" will work when we scroll to the bottom. on top images will already loaded

ἔρωςOP•15mo ago

i tried it, it doesnt work no matter where i put

Mirza•15mo ago

open dev tools go to the network section then scroll to that part where image is there you will notice that image is getting loade when you scrool/reach to that part

Jochem•15mo ago

did you open the jsfiddle? It's a single image with a second hidden using CSS there's nothing to scroll

Mirza•15mo ago

Ohh that will not work html loading="lazy" will only works when you scrool to that section you need js to switch between images

ἔρωςOP•15mo ago

its not just that its an image that is inside a symbol (aka - not in the dom) but it is still being downloaded anyways if you check the network tab in f12, you see 2 images loading while 1 isnt in use at all but it is still loaded

Mirza•15mo ago

bro what's you goal?

Jochem•15mo ago

it still prevents display: none; images from being loaded, even if they would otherwise be on screen.

ἔρωςOP•15mo ago

my goal is that the image that isnt being used in an <use> tag isnt downloaded at all

Mirza•15mo ago

should not download ?

ἔρωςOP•15mo ago

i think it shouldnt i think that it should only download when you repeat the non-hidden svg and use the kitty1 image

Mirza•15mo ago

showing one on top but should get download other?

ἔρωςOP•15mo ago

you see the 2 <symbol> tags?

Mirza•15mo ago

yeah

ἔρωςOP•15mo ago

those indicate a piece of svg that you can then refer to with <use> and as far as i know, they arent rendered

Mirza•15mo ago

then will render why they won't render?

ἔρωςOP•15mo ago

mdn describes the symbol as a graphical template object that then it is instantiated by an use tag so, until a use tag refers to it, the symbol shouldnt be rendered that's what i understand however, the 2 images are downloaded anyways, even if only 1 of the symbols has an use tag associated to it

Mirza•15mo ago

you rapping that both img in svg tag

ἔρωςOP•15mo ago

yes and mdn says that the symbol isnt to be rendered, only the use tags are rendered

Mirza•15mo ago

yeah

ἔρωςOP•15mo ago

but the image is still downloaded anyways and the lazy loading doesnt work (but he already explained a very likely reason why)

Mirza•15mo ago

actually img is getting downloaded not not visible in my case

ἔρωςOP•15mo ago

thats the problem: its not supposed to download it i think i cant see that, im on my phone

Mirza•15mo ago

ok you did mistake

ἔρωςOP•15mo ago

which one?

Mirza•15mo ago

now it's not downloading it

ἔρωςOP•15mo ago

cache if it caches the image, it doesnt download it

Mirza•15mo ago

not image that should be img in tag

    <img href="https://placekitten.com/200/300" width="200" height="300" loading="lazy" />

    <img href="https://placekitten.com/250/350" width="250" height="350" loading="lazy" />

    <svg width="200" height="300">
        <use href="#kitty2" />
    </svg>

    <img href="https://placekitten.com/200/300" width="200" height="300" loading="lazy" />

    <img href="https://placekitten.com/250/350" width="250" height="350" loading="lazy" />

    <svg width="200" height="300">
        <use href="#kitty2" />
    </svg>

like this

ἔρωςOP•15mo ago

that doesnt work then i cant use it

Mirza•15mo ago

now it's following mdn what you can't use?

ἔρωςOP•15mo ago

because i need to use it multiple times in the same page and sometimes, a dummy link that's also in another svg that's why im using svg symbols so i can just <use> the ones i need

Jochem•15mo ago

is there any reason you can't just use img tags directly?

ἔρωςOP•15mo ago

yes, re-use of symbols is one

Jochem•15mo ago

but multiple instances of the same img URL will just cache

ἔρωςOP•15mo ago

but its not just images

Jochem•15mo ago

are you adding extra bits using the SVG or something?

Mirza•15mo ago

so just add img by css use that css class where you want that img

ἔρωςOP•15mo ago

for example, i have a dummy icon that i want to use when there arent icons for it that is inside an svg

Mirza•15mo ago

yeah that will be under lazy loading

ἔρωςOP•15mo ago

at rendering time, i wont always know what i will need

Jochem•15mo ago

so then you use the SVG for the dummy icons and the images for the regular icons?

ἔρωςOP•15mo ago

i have other code that relies on this as well for the page that this is hurting the most, i will have to load about 320 icons i see that i will likely have to re-write everything in javascript and load the data over json

Mirza•15mo ago

ohk whats the size of img's

ἔρωςOP•15mo ago

im seeing the html ballooning to almost 23kb, and i still have to render a load of other elements 752 bytes to 279kb

Mirza•15mo ago

physical size?

ἔρωςOP•15mo ago

svg doesnt have that concept the external images are svgs

Mirza•15mo ago

and you don't want to use single line of js?

ἔρωςOP•15mo ago

want? no but, i see i will have to

Mirza•15mo ago

did you try svg in alt=""

ἔρωςOP•15mo ago

what do you mean?

Mirza•15mo ago

you are adding loading="lazy" which have to prevent download img until you reach there but in our case it's not working you can use alt="" tag as alt img until we reach there

ἔρωςOP•15mo ago

yes, because i probably misunderstood how the image tag works in svg you cant "reach there" to something that doesnt exist

Mirza•15mo ago

wtf that's why i was asking physical size of images

ἔρωςOP•15mo ago

the <symbol> is the same-ish at a <template> it isnt rendered unless an <use> element has the link attribute pointing to the id of the <symbol>

Mirza•15mo ago

yeah then use img's in alt tag only

ἔρωςOP•15mo ago

therefore, it basically isnt "there" in the document there's no alt tag in svg or html

Mirza•15mo ago

Mirza•15mo ago

in my case only one img is getting load not both

ἔρωςOP•15mo ago

but you edited the code and it no longer uses svg

Mirza•15mo ago

no i'm using svg now

ἔρωςOP•15mo ago

can you show me your code?

Mirza•15mo ago

1 sec

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>

    <svg hidden>
        <!-- kitty not in use, but loads anyway -->
        <symbol id="kitty1" viewBox="0 0 250 350">
          <image href="https://placekitten.com/250/350" width="250" height="350" />
        </symbol>
        
        <!-- kitty in use -->
        <symbol id="kitty2" viewBox="0 0 200 300">
          <image href="https://placekitten.com/200/300" width="200" height="300" loading="lazy" alt="" />
        </symbol>
      </svg>
      
      <svg width="200" height="300">
        <use href="#kitty2"/>
      </svg>
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>

    <svg hidden>
        <!-- kitty not in use, but loads anyway -->
        <symbol id="kitty1" viewBox="0 0 250 350">
          <image href="https://placekitten.com/250/350" width="250" height="350" />
        </symbol>
        
        <!-- kitty in use -->
        <symbol id="kitty2" viewBox="0 0 200 300">
          <image href="https://placekitten.com/200/300" width="200" height="300" loading="lazy" alt="" />
        </symbol>
      </svg>
      
      <svg width="200" height="300">
        <use href="#kitty2"/>
      </svg>
</body>

</html>

ἔρωςOP•15mo ago

let me try that

ἔρωςOP•15mo ago

i cant reproduce your results

ἔρωςOP•15mo ago

im working from another pc with the usb ports disabled

Mirza•15mo ago

k k

ἔρωςOP•15mo ago

even firefox has the same behavior

Mirza•15mo ago

image should available in view port and should not get download what you want broooo

ἔρωςOP•15mo ago

i want it to work, but its fine i will change my approach to this

Mirza•15mo ago

wait let me know what you want i'm i correct? html

<div class="image-container">
  <img src="your-svg-image.svg" alt="SVG Image" data-load="true">
</div>

<div class="image-container">
  <img src="your-svg-image.svg" alt="SVG Image" data-load="true">
</div>

css

.image-container img[data-load="false"] {
  display: none;
}

.image-container img[data-load="false"] {
  display: none;
}

// Function to enable or disable image loading
function toggleImageLoading() {
  const image = document.querySelector('.image-container img');
  const currentLoadValue = image.getAttribute('data-load');
  
  if (currentLoadValue === 'true') {
    image.setAttribute('data-load', 'false');
  } else {
    image.setAttribute('data-load', 'true');
  }
}

// Function to enable or disable image loading
function toggleImageLoading() {
  const image = document.querySelector('.image-container img');
  const currentLoadValue = image.getAttribute('data-load');
  
  if (currentLoadValue === 'true') {
    image.setAttribute('data-load', 'false');
  } else {
    image.setAttribute('data-load', 'true');
  }
}

your img activating button

<button onclick="toggleImageLoading()">Toggle Image Loading</button>

<button onclick="toggleImageLoading()">Toggle Image Loading</button>

give it a try

ἔρωςOP•15mo ago

that's not what i want

Mirza•15mo ago

what you want ????

ἔρωςOP•15mo ago

i just want that the unused image isnt downloaded

Mirza•15mo ago

but you are using it bro

ἔρωςOP•15mo ago

no, 1 of the 2 images is being used, but 2 images are downloaded

Mirza•15mo ago

need to contact mdn raise your query at mdn

ἔρωςOP•15mo ago

i think im trying to milk beer from a rock i will reimplement what i need in javascript

Mirza•15mo ago

go on bro

ἔρωςOP•15mo ago

this is going to be used on a page with maybe 1000 checkboxes (i didnt design this) and the html is already very bloated with less than 300 checkboxes

Mirza•15mo ago

lol on which website we use 1000 checkbox

ἔρωςOP•15mo ago

its for people to enable and disable stuff

Mirza•15mo ago

are you making game by checkbox

ἔρωςOP•15mo ago

no its something for work

Mirza•15mo ago

if done and if you can share with us please want to know what was that btw do you know how to config webpack @epic2937 @Jochem

Jochem•15mo ago

@mirza2282 make your own post please, don't highjack others' posts webpack would probably go in #os-and-tools

Mirza•15mo ago

ohk sorry and thanks

dys 🐙•15mo ago

Have you tried:

<foreignObject>
  <img xmlns="http://www.w3.org/1999/xhtml" loading="lazy"
src="myimg.png"/>
</foreignObject>

<foreignObject>
  <img xmlns="http://www.w3.org/1999/xhtml" loading="lazy"
src="myimg.png"/>
</foreignObject>

ἔρωςOP•15mo ago

no, i haven't HOLY that actually works

Mirza•15mo ago

Suck You told only you want that in svg tags And image yag Tag* <image>?<img>

ἔρωςOP•15mo ago

that there is valid svg i tried to replicate this into my environment and it didnt work i then tried to use it in the jsfiddle and i can replicate it there, again i did some research and i was a bonehead idiot apparently, images and foreignobject dont always mesh well i will need to check how discord is doing it and replicate it

Jochem•15mo ago

Pretty sure Discord just uses img tags for PFPs, icons, and emoji

ἔρωςOP•15mo ago

no, they use an svg with a foreignobject

Jochem•15mo ago

for what?

ἔρωςOP•15mo ago

profile pictures all of them

Jochem•15mo ago

really?

ἔρωςOP•15mo ago

and the parent elements?

Jochem•15mo ago

a div and an li the entire chat is an ol, with li's for each message, and then a div wrapper, an img for the avatar, an h3 for the username and timestamp (wrapped in some spans and a time element), and a separate div for the message content as a sibling for the avatar/username wrapper if you're doing avatars, you should just include the avatar URL with your message JSON and populate an img. The browser will cache them for you

ἔρωςOP•15mo ago

i will re-check later on, because they were using an svg i was wrong, only the profile image uses an svg when you click on someone

Jochem•15mo ago

and even then I think it's just so that they can easily add the status icon

ἔρωςOP•15mo ago

yes i figured that what i want to do isnt possible anyways the foreign object tag is ignored when inside a symbol, even though mdn says it is allowed according to the spec, this MUST work

ἔρωςOP•15mo ago

https://jsfiddle.net/5roy3x2z/ <-- doesnt work

Edit fiddle - JSFiddle - Code Playground

Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.

ἔρωςOP•15mo ago

https://svgwg.org/svg2-draft/struct.html#SymbolElement <-- the spec i will reimplement this with intersection observers and other stuff

dys 🐙•15mo ago

Apparently you can't <use> a <foreignObject>. This also doesn't work:

<svg viewBox="0 0 200 300">
  <defs>
    <g id="kitty">
      <foreignObject width="200" height="300">
        <img xmlns="http://www.w3.org/1999/xhtml" src="https://placekitten.com/200/300" />
      </foreignObject>
    </g>
  </defs>
  <use href="#kitty"/>
</svg>

<svg viewBox="0 0 200 300">
  <defs>
    <g id="kitty">
      <foreignObject width="200" height="300">
        <img xmlns="http://www.w3.org/1999/xhtml" src="https://placekitten.com/200/300" />
      </foreignObject>
    </g>
  </defs>
  <use href="#kitty"/>
</svg>

ἔρωςOP•15mo ago

yeah, i just gave up, and wrote everything in javascript

Mirza•14mo ago

hehe

Gaming

Programming

lazy-loaded `<image>` in `<symbol>` always loads