search

airbnb / lottie-web

Render After Effects animations natively on Web, Android and iOS, and React Native. http://airbnb.io/lottie/
MIT License
30.54k stars 2.87k forks source link

Picture loaded twice in lottie-web #1317

Open wrbing728 opened 6 years ago

wrbing728 commented 6 years ago

I change the pictures in json file from base64 to cdn url, then strange things happened: all the pictures load twice.

image

bodymovin commented 6 years ago

Hi, how are you changing them?

wrbing728 commented 6 years ago

I edit the content manually.

bodymovin commented 6 years ago

lottie preloads images before starting the animation. But I'm not sure if this is the reason why you see the image loaded twice. Can you share some more info or a link?

wrbing728 commented 6 years ago

Here is an example https://codepen.io/wrbing/pen/VEzYBd You can see the image request twice like this: image

bodymovin commented 6 years ago

Yes, it's normal that it loads twice using the svg renderer. One is triggered by the preloader before the elements are added to the DOM. The second is loaded by the ImageElement when it adds the tag to the It's an intended behavior so every element is ready and cached before starting the animation.

flowke commented 5 years ago

Yes, it's normal that it loads twice using the svg renderer. One is triggered by the preloader before the elements are added to the DOM. The second is loaded by the ImageElement when it adds the tag to the It's an intended behavior so every element is ready and cached before starting the animation.

In Android webview load a html page . when lottie-web preload a image , it may just load a half and then turn fail, in this circumstance, android device will cache the broken image(it just load a half).

in the second time load image (code: this.innerElem.setAttributeNS('http://www.w3.org/1999/xlink','href',assetPath);) it will load the braken cached image. how could i disable preload

ktut commented 4 years ago

Bringing this back - this causes extra problems when using elements like sliders, which need to make copies of the containing components to allow for infinite scrolling. This could mean assets being loaded up to six times (!!) instead of the two described here.

How might one disable preloading so the image is only loaded once, and then cached properly by the browser?