# Flickering issue caused by JS

**URL:** <https://forums.ankiweb.net/t/flickering-issue-caused-by-js/47065>\
**Category:** Card Design\
**Created:** [July 14, 2024, 3:33pm UTC](https://forums.ankiweb.net/t/flickering-issue-caused-by-js/47065 "2024-07-14T15:33:05Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![tatsumoto](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/tatsumoto/32/5411_2.png) [@tatsumoto](https://forums.ankiweb.net/u/tatsumoto)\
**Post date:** [July 14, 2024, 3:33pm UTC](https://forums.ankiweb.net/t/flickering-issue-caused-by-js/47065/1 "2024-07-14T15:33:06Z")

</div>

I’ve noticed that if I reference a JS file in my card template, the cards start to flash/flicker when they load. The template looks like this:

```auto
{{Front}}
<script src="_file.js"></script>

```

The screen becomes blank for a moment and then the card loads. This issue does not occur when I insert the JS code directly in the template, e.g. like this:

```auto
{{Front}}
<script>
// some code
</script>

```

Is this some kind of a bug in the Anki webview? I like the first method of importing JS code because it avoids code duplication — multiple note types can reference the same JS file, so I’d like to find a way to fix it.

---

<div class="post-metadata">

**Author:** ![tatsumoto](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/tatsumoto/32/5411_2.png) [@tatsumoto](https://forums.ankiweb.net/u/tatsumoto)\
**Post date:** [July 15, 2024, 10:38am UTC](https://forums.ankiweb.net/t/flickering-issue-caused-by-js/47065/2 "2024-07-15T10:38:48Z")

</div>

Could the issue be caused by this? [don't cache js files · ankitects/anki@972c9da · GitHub](https://github.com/ankitects/anki/commit/972c9da12e1e44fc2d80b2a90fa354f758e71da5)

---

<div class="post-metadata">

**Author:** ![jhhr](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/jhhr/32/21339_2.png) [@jhhr](https://forums.ankiweb.net/u/jhhr)\
**Post date:** [July 15, 2024, 1:07pm UTC](https://forums.ankiweb.net/t/flickering-issue-caused-by-js/47065/3 "2024-07-15T13:07:15Z")

</div>

Is the flickering fixed, if you import the js file like this:

```html
<script>
var exportedFunction;
if (!exportedFunction) {
  import("/_file.js").then(moduleObj => {
    globalThis.exportedFunction = moduleObj.exportedFunction;
  });
</script>

```

This is basically implementing a kind of caching by taking advantage of the way global variables are kept between card renders on desktop.

Edit: Fixed import path missing `/`

---

<div class="post-metadata">

**Author:** ![tatsumoto](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/tatsumoto/32/5411_2.png) [@tatsumoto](https://forums.ankiweb.net/u/tatsumoto)\
**Post date:** [July 15, 2024, 1:45pm UTC](https://forums.ankiweb.net/t/flickering-issue-caused-by-js/47065/4 "2024-07-15T13:45:44Z")

</div>

`import("_file.js")` doesn’t load anything, but `import("/_file.js")` does work.

I can’t notice the flickering when doing it this way, but it’s essentially the same thing as writing the code inside `<script></script>`, except it will probably work better if the script is large thanks to the caching. I wanted to use `<script src="...">` because then I won’t have to repeat myself that much.

I have also tried changing `max_age = 0` in `qt/aqt/mediasrv.py` to a larger number, but it didn’t fix it for some reason.

---

<div class="post-metadata">

**Author:** ![dae](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/dae/32/65_2.png) [@dae](https://forums.ankiweb.net/u/dae)\
**Post date:** [July 20, 2024, 5:48am UTC](https://forums.ankiweb.net/t/flickering-issue-caused-by-js/47065/5 "2024-07-20T05:48:45Z")

</div>

If you believe there’s been a regression, please bisect it. If the issue has always been there, maybe using the async or defer on the script tags will help.

---

<div class="post-metadata">

**Author:** ![tatsumoto](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/tatsumoto/32/5411_2.png) [@tatsumoto](https://forums.ankiweb.net/u/tatsumoto)\
**Post date:** [July 20, 2024, 6:45am UTC](https://forums.ankiweb.net/t/flickering-issue-caused-by-js/47065/6 "2024-07-20T06:45:47Z")

</div>

I have tried both async and defer, but there was no difference. I think this is not a recent regression but rather something that has been present for a long time. I only recently tried adding a script file to collection.media and importing it in my card template, so I didn’t notice the issue before.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex002/uploads/anki2/original/1X/8f1279ababc5879d54e4838989f606cfe55af8c7.jpeg) [@system](https://forums.ankiweb.net/u/system)\
**Post date:** [August 19, 2024, 6:46am UTC](https://forums.ankiweb.net/t/flickering-issue-caused-by-js/47065/7 "2024-08-19T06:46:44Z")

</div>

Closed on August 19, 2024, 6:46am UTC

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.