ailon / markerjs-live

Display dynamic, interactive, and scalable image annotations in your web apps.
7 stars 1 forks source link

"Re-render" a cached image #5

Closed mharper6008 closed 2 years ago

mharper6008 commented 2 years ago

I have a situation where I retrieve images and render the markup with live. I then cache the img src so it doesn't need to be retrieved again. The first time I retrieve and render the image, the markup is applied without any issue. The problem I have is when I re-render from the cached src, I can't get the markup to render on load. It won't render unless I do the render from onlick. No errors anywhere. Any pointers on where to look? Thank you!

Additional information: If I use the Chrome to Inspect the elements, when the cached image is showing, there are no markerjslive tags, as would be expected. The only difference [I can see] in the code is that I'm retrieving the img src from memory instead of fetching across the wire.

ailon commented 2 years ago

I wonder if the onload event from which you initiate the display of annotations just isn't fired with the cached image? I guess a simple (yet a dirty(ish)) workaround would be to just run the marker.js live code with a short delay (via setTimeout()) after you set the image src. Provided you already have the image loaded in cache it shouldn't introduce any issues.

mharper6008 commented 2 years ago

The onload is fired, but seems to be fired before the image is really "ready" with the source loaded from memory. I did end up needing to use a timeout. The larger the image size, the larger the required timeout.