object support?

[zvaehn]

How about supporting the object-tag?
I am currently using this library for images and i would love to use it for svgs inside objects as well.

[verlok]

Hi @zvaehn,
Thank you for the suggestion!

To better understand your request, could you post here the snippet of HTML code you would use?

Thanks

[zvaehn]

<object type="image/svg+xml" data="image.svg"></object>

data has to be set and the value could be provided over the already existing data_src.
The type could vary in different use-cases, but this should not be relevant, is it?

[verlok]

That would make sense, but I never saw an SVG used like that. Are you sure it works?

I tried it on this Pen, both with the src and the data set, but I can't see the image displayed.

<object type="image/svg+xml" src="http://simpleicon.com/wp-content/uploads/mail-5.svg"></object>

On the other hand, the svg file as source of an img tag works. Like:

<img src="http://simpleicon.com/wp-content/uploads/mail-5.svg" alt="mail"></img>

So why don't use the img tag to lazily load SVGs too?

[zvaehn]

I think there is an issue with the svg you are using.
I forked your pen and it just works fine :)

The object-tag is more flexible than the img-tag.
For example: I am using a custom font inside the svg

If you are using the img-tag, the font cannot be loaded.

[verlok]

It probably was a mixed-content issue, due to the fact that codepen is on https and the image was your

[verlok]

...was on http. Thanks for fixing that.
I’ll take a look to the code to see how easy is to change the destination attribute to data. It shouldn’t be a big deal.

[verlok]

Still here.
Sorry for taking that long, bad time.
Will work on this ASAP.
Many thanks for your patience.

[verlok]

Hi @zvaehn, I'm not quite sure this is in-scope for the LazyLoad project. Adding another meta data attribute would add too much code just to handle a small percentage of the use cases. Maybe try doing a pull request if you have an idea. Thank you for your patience.

[matheusdigital]

Hello guys. Just found this and checked that vanilla-lazyload is still not being able to work with the <object> HTML tag. In my case, I need the <object> tag for loading an animated SVG to the HTML page. Browsers currently don't allow an animated SVG to reproduce its animation while loading it with a <img> tag, but they do with the <object> tag. Did you guys found any solution or workaround to a situation like this?
Thanks in advance.

[verlok]

Hi @matheusdigital
I’ve updated you comment escaping the html tags with the backticks (`) because they weren’t visible to readers before.

[verlok]

I understand your request now @matheusdigital

So you would like something like this:

<object type="image/svg+xml" 
        class="lazy" 
        data-data="https://greensock.com/wp-content/themes/greensock/images/icon-github.svg">
</object>

To become the following when it enters the viewport

<object type="image/svg+xml" 
        class="lazy entered" 
        data="https://greensock.com/wp-content/themes/greensock/images/icon-github.svg">
</object>

Is that correct?

[matheusdigital]

@verlok Exactly!

I managed how to get that with the following JS code. But I guess you could implement something similar onto your lib :)

<object 
  class="scroll-reveal-animation" 
  type="image/svg+xml" 
  data-object="https://greensock.com/wp-content/themes/greensock/images/icon-github.svg">
</object>`

function scrollTrigger(selector) {
  let elementsFound = document.querySelectorAll(selector)
  elementsFound = Array.from(elementsFound)
  elementsFound.forEach(domElement => {
    addObserver(domElement)
  })
}

function addObserver(domElement) {
  let observer = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.classList.add('active')
        var svgObject = entry.target.getAttribute('data-object');
        if (svgObject) {
          entry.target.setAttribute('data', svgObject);
        }
        observer.unobserve(entry.target)
      }
    })
  })
  observer.observe(domElement)
}

document.addEventListener('DOMContentLoaded', () => {
  scrollTrigger('.scroll-reveal-animation');
});

Thanks!
(By the way, how do you format code blocks like you did in the preview comment!?)

[verlok]

(I edited your comment above, if you edit it again you will see how to format code blocks)

[verlok]

Yes I am thinking about implementing this in LazyLoad.
It should be quite an easy task.

[verlok]

The only thing I'm still not understanding is: I never used the object tag to load SVGs.
I'm investigating if this can be done using the the svg tag instead, and loading an external source.

[verlok]

Anyway since I see the object tag can be used to display also PDFs and other stuff, I guess I will just implement it for the object tag, then eventually extend it to the svg tag.

[verlok]

When I googled a bit to see if I could use the svg tag, I've found this script: external-svg-loader, that you could find useful to load external SVGs using the svg tag, which is, I guess, more accessible then the object tag.
Here's a CSS-tricks article which shows how to use it.

[verlok]

So for now I will only work on lazy loading the object tag, which can be useful to load anything.

[matheusdigital]

Yes, agree. Thanks for looking into it and all the clear information, @verlok!

[verlok]

Feature added! See documentation and version 17.6.0.
@matheusdigital let me know if it works for your case!

[verlok]

@matheusdigital did you have the chance to try it?

[verlok]

@zvaehn would you be able to try this to lazyload your external SVGs with an object tag?

[verlok]

@matheusdigital did you have any chance to try it out?

[verlok]

@zvaehn , @matheusdigital
did you get the chance to try the new version with object support?

[verlok]

Hey @zvaehn, @matheusdigital

I didn't get any feedback 😞, but I'm closing this issue assuming it works. Feel free to reopen in case you need anything.

If you’re happy with my support, the documentation and the effort I’ve been putting on this project in the latest years, I hope you might want to buy me a coffee to show your appreciation. Or sponsor me, if you're a fan.

Open-source software is great for everyone, but it takes passion and time (and coffee!) to grow and evolve.

Thank you for thinking about it.
Have a wonderful day!