Code Monkey home page Code Monkey logo

Comments (5)

adiguba avatar adiguba commented on June 16, 2024 1

Hello,

The difference seems to come from the fact that Svelte 4 uses createElement('img') while Svelte 5 uses createElement('template').

Exemple here :

  • REPL Svelte 4

  • REPL Svelte 5

  • addRandomImageUsingSvelte work on Svelte 4 but not Svelte 5

  • addRandomImageUsingTemplate do no work on Firefox

  • addRandomImageUsingElement work

This appears to be a Firefox's bug...

from svelte.

Conduitry avatar Conduitry commented on June 16, 2024

I think I vaguely remember this coming up before. I think it was related to the order that attributes are attached to the element - i.e., if src were attached before loading was, the image would start to load right away. I don't remember what the resolution was at the time.

from svelte.

yamplum avatar yamplum commented on June 16, 2024

I think I vaguely remember this coming up before. I think it was related to the order that attributes are attached to the element - i.e., if src were attached before loading was, the image would start to load right away. I don't remember what the resolution was at the time.

Do you mean #7657? I'm not sure how much it's related as the order of attributes is "correct" in my code — maybe different story on the emitted side?

from svelte.

yamplum avatar yamplum commented on June 16, 2024

This appears to be a Firefox's bug...

Potentially due to this?: https://bugzilla.mozilla.org/show_bug.cgi?id=1758288

Although I can't seem to reproduce the provided example when loading="lazy" is specified on the template, only without it.

Edit: nevermind, seems like the download is triggered when the img element is mounted from the template to the DOM, so I guess it's unrelated.

Edit 2: poking around some more, it seems like the img created in template has its src prepopulated by img.baseURI, while the one created with createElement is empty. Seems to point to https://bugzilla.mozilla.org/show_bug.cgi?id=1804875 being the root cause?

const template = document.createElement('template');
template.innerHTML = '<img height="200" width="200" loading="lazy" alt="" src="" />';
const img1 = template.content.firstChild;
console.log("img1 src:", img1.src);

image

const img2 = document.createElement('img');
img2.height = 200;
img2.width = 200;
img2.loading = "lazy";
img2.alt = "";
console.log("img2 src:", img2.src);

image

from svelte.

trueadm avatar trueadm commented on June 16, 2024

I wonder if this is another of those cases that fails when using cloneNode vs document.importNode on the template. Related maybe is Solid's issue on this solidjs/solid#1828

from svelte.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.