search

newsdev / ai2html

A script for Adobe Illustrator that converts your Illustrator artwork into an html page.
http://ai2html.org
Other
897 stars 145 forks source link

Lazy load artboard images on scroll #89

Closed sjwilliams closed 6 years ago

sjwilliams commented 6 years ago

This PR changes resizer to lazy load artboard images on scroll using window.IntersectionObserver on platforms that support it instead of automatically loading an image when an artboard is set to display:block. On unsupported platforms the functionality remains the same as the current version: the image source is set at the same time as the artboard is displayed.

At the moment, browser support for IntersectionObserver is growing but incomplete. It's mostly desktop browsers (other than Safari) and mobile Chrome. See details. Most users will see a benefit today but there is a sizable minority who won't.

This functionality is something @archietse has been asking for for NYT graphics. I'm not sure this is the best implementation, especially given the spotty browser support, but it should be rather performant, is relatively concise and agnostic to whether the graphic is on nytimes.com or not, and support should improve over time.

If we want to consider this approach, I have a few questions about things I was unsure about in the current code:

  1. Since I'm running the new update method both on resize and when triggered by IntersectionObserver, should I continue to call the scriptEnvironment=="nyt" every time? I'm not 100% how those apps work and the repercussions of running that code.
  2. The current code requeries the page for artboards on every resize. That seemed unnecessary so I cached the query (var artboardEls = selectElements(artBoardSelector)), but it's possible I overlooked something.

Also: testing has been pretty limited so far to desktop browsers and emulators. If we want to purse this approach we need to test in all the places ai2htmls are rendered across NYT platforms.

mbloch commented 6 years ago

Hi Josh, Thanks for submitting this code! I just published an update (v0.72.0) that is based on your updated resizer function, but with a few tweaks. We can discuss the changes i made tomorrow...