search

shinsenter / defer.js

🥇 A lightweight JavaScript library that helps you lazy load (almost) anything. Defer.js is dependency-free, highly efficient, and optimized for Web Vitals.
https://shinsenter.github.io/defer.js/
MIT License
277 stars 45 forks source link

Thanks + Question for injection elements #90

Closed onur-km closed 3 years ago

onur-km commented 3 years ago

First of all, thank you for developing excellent and simple code like this.

Can i include SVGs with defer.dom?

I have SVG sprite. And I want load it with defer.js.

Eg.

<svg data-src="path/sprite.svg"></svg>

to

<svg>
  <symbol>...</symbol>
  <symbol>...</symbol>
  <symbol>...</symbol>
  <symbol>...</symbol>
</svg>
shinsenter commented 3 years ago

@onur-km Currently defer.js does not support lazyload svg files as you described, to do this need to handle more ajax to load the svg file and insert it into the document.

I've always wanted the library to be as minimal as possible, yet flexible enough for most usage scenarios.

In the Defer.dom function there is a parameter for you to put in a callback function that handles the dom object, which you can use to perform ajax calls for svg tags.

Regards

onur-km commented 3 years ago

Okey, thank you for your interest. I will try something, I hope I can get a successful result. I can add the progress here so it will be a light for those with similar needs. Also, if nothing else, I'm closing the issue.

shinsenter commented 3 years ago

@onur-km

If you provide me with a working demo, I would greatly appreciate it and I will share it with others who are similarly interested.

Thanks

onur-km commented 3 years ago

There is a live demo here. I didn't care much for coding, but I guess everything seems clear.

Its cache is supported by LocalStorage.

shinsenter commented 3 years ago

@onur-km I found an article about inlining svg https://css-tricks.com/svg-loader-a-different-way-to-work-with-external-svg/