Laravel Livewire Turbolinks with Image lazyload

Question

我正试图在Laravel Livewire上建立一个网站，使用Vanilla Lazyload和Turbolink。在刷新页面时，页面上的图像是惰性加载的，但我很快点击链接，图像不会惰性加载，直到我手动刷新或进入页面。默认的低质量图像是可见的，只是占位符。

任何人都可以指导或分享一个链接，这样我就可以在Livewire Turbolink中加载图像。任何其他建议，使应用程序像SPA一样，也欢迎。

谢谢。

---

编辑

---

//app.js
const Turbolink = require('turbolinks');
Turbolink.start();
window.LazyLoad = require('vanilla-lazyload');

// card.blade.php
<a href="{{ $url }}" class="hover:text-black">
<div class="grid grid-cols-3 gap-2 bg-white rounded-lg hover:shadow-md border border-slate-100 py-4 hover:bg-slate-100 ease-in duration-300 cursor-pointer px-2">
<img src="{{ asset('img/defaults/banner.jpg') }}" data-src="{{ $image }}" class="lazy w-52 mx-auto my-2">
<div class="col-span-2">
<p class="text-sm pt-3 font-inter m-auto">16 Jul, 2022</p>
<h3 class="text-xl font-frank m-auto">{{ $title }}</h3>
</div>
</div>
</a>

当我通过F5刷新页面或手动输入地址时，这就是图像加载的方式，这就是我想要的。

在页面刷新时如何加载图像

这就是我如何最终点击任何由Turbolink处理的链接。

点击页面上的任何链接，这是由Turbolink处理我最终只有低质量的图像。这样的

Answer 1

好了，经过一番研究，我找到了答案。

在turbollinks中的，点击任何你需要在加载时重新初始化js的URL，这可以在js中作为

完成

window.addEventListener('turbolinks:load', function(){...}

通过jQuery

$(document).on('turbolinks:visit',function(){...}

这可能对访问这篇文章的人有用。你实际上需要监听事件，然后重新init。

这是有用的，如果你正在使用Turbolink 5或更新的版本。对于旧版本，您需要侦听page:load而不是turbolinks:visit。