search

pawelgrzybek / siema

Siema - Lightweight and simple carousel in pure JavaScript
https://pawelgrzybek.github.io/siema/
Other
3.48k stars 411 forks source link

Window onResize event listener to add arrows re-downloads images in Safari #168

Open dareiff opened 6 years ago

dareiff commented 6 years ago

Hi! Thanks for the wonderful plugin, first of all! I recently added an event listener to add navigation arrows on window.resize. It works! But, I noticed in Inspector that each resize event redownloads images for the carousel. It looks like it's setting the carousel up fresh each time.

https://codepen.io/dareiff/pen/aGBGoZ

I don't notice the issue in Chrome!

dareiff commented 6 years ago

I also noticed that it uses a large amount of CPU in the latest version of Safari, but the issue does not appear at all in Safari Technology Preview...

deanwagman commented 6 years ago

Hey dareiff,

The add arrows method is being called every time the browser is resized. This happens for every single pixel that the screen is resized. So this gets called 100ish times if you resize 100px. I would look into throttling the event, or using a media query list listenener. You also should think of the repercussions of this function being ran more than once.

http://bencentra.com/code/2015/02/27/optimizing-window-resize.html https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList/addListener

dareiff commented 6 years ago

Thanks @deanwagman. Yeah, it's really bad in Firefox and the current version of Safari, but seems to be OK in STP and Chrome. I will look at optimizing. (But still curious why Safari is downloading the images each time!)