Alpine: img inside template tags are fetched by the browser

[fredcarle]

I've been puzzled by this issue I'm having. In the particular case seen bellow, the image inside the the second template block is fetched by the browser before having showInfo == true but the background image inside the first template block, as expected, is not fetched. So I'm having 200+ large images being loaded prematurely which make my initial page load way too large.

Any clue as to why that may be the case?

<div class="list">
  <div class="wrapper" x-data="{showInfo: false, showList: isShowList()}">
    <div class="table-row" @click="showInfo = !showInfo">
      <div class="column">
        <h1>Some row title</h1>
      </div>
      <div class="column">
        <template x-if="showList">
          <!-- this background image does load until showList == true -->
          <span class="icon-image" style="background-image: url('path/to/icon');"></span>
        </template>
      </div>
    </div>

    <div x-show="showInfo" class="table-row info">
      <template x-if="showInfo">
        <!-- this image loads right away???? -->
        <img src="path/to/image">
      </template>
    </div>
  </div>
  ... many more rows
</div>

[SimoTod]

It works okay for me (https://codepen.io/SimoTod/pen/JjYvKZb, see network tab filtered by image).

Is it a specific browser? In that case it's unlikely to be an Alpine issue.

Not sure if it's related or you just missed it when you copied that example but your html is not balanced. You miss a closing </div> for <div x-show="showInfo" class="table-row info"> and the closing </div> for <div class="wrapper" x-data="{showInfo: false, showList: isShowList()}"> has a typo.

[fredcarle]

@SimoTod Sorry for the typos. And yeah just forgot to close that div.

It seems to be the same for both Firefox and Chrome. I'll try to investigate further. My hypothesis right now is that for some reason, the showInfo variable would be set to true momentarily and would render the whole list's info blocks.

[HugoDF]

@SimoTod Sorry for the typos. And yeah just forgot to close that div.

It seems to be the same for both Firefox and Chrome. I'll try to investigate further. My hypothesis right now is that for some reason, the showInfo variable would be set to true momentarily and would render the whole list's info blocks.

That doesn't sound like something that would happen, before Alpine kicks in the images inside template shouldn't be showing, maybe the browsers just fetches them despite not showing/not being mounted to the DOM. In that case could you try doing img :src="'the-url'" (note the single quotes inside the double quotes), it should mean that it won't set src until Alpine kicks in.

[SimoTod]

Yeah, it's a bit weird. My codepen doesn't seem to load those images before i toogle the boolean. I tried with chrome on macOS.

If you can post an example to replicate on codepen or similar, we'll try to have a look.

Hugo's suggestion it's a great workaround if it turns up it's a browser issue.

[fredcarle]

@HugoDF & @SimoTod thanks so much for your time today. I'll close the issue as I've replicated it without even using Alpine. Also I'll change what I said earlier, the issue is only happening in Firefox. Although, the shared codepen is working just fine in Firefox.

The img :src="'the-url'" solution that @HugoDF suggested is solving the problem. I'll use that solution for now.