1. 首页
  2. css

CSS在Svelte中延迟加载图像

提高网站速度的一个简单方法是只在需要时下载图片,也就是当图片进入视窗时。这种\”延迟加载\”技术已经有一段时间了,关于如何实现它有很多很好的教程。
但是即使有了所有的资源,实现延迟加载看起来也会有所不同,这取决于您正在使用的项目或框架。在本文中,我将在onLoad事件旁边使用Intersection Observer API来使用Svelte JavaScript框架延迟加载图像。
如果您对该框架还不熟悉,请查看Tristram Tolliday对Svelte的介绍。让我们使用一个真实的示例来测试这个框架的速度一个苗条和蓝宝石的应用程序,我的工作,商店爱尔兰。我们的目标之一是尽可能快地完成任务。由于浏览器下载了一堆甚至不在屏幕上的图像,我们的主页性能受到了很大的影响,所以很自然地,我们转而懒洋洋地加载它们。
Svelte已经非常快了,因为所有的代码都是预先编译的。但是一旦我们开始延迟加载图像,事情就真的开始加速了。请随意从GitHub获取此演示的最终代码,并阅读它的工作原理说明。
这就是我们将结束的地方:CodePen Embed Fallback让我们快速启动Svelte
您可能已经有了一个想要使用的Svelte应用程序,但如果没有,让我们启动一个新的Svelte项目并在本地进行处理。从命令行:
npx degit sveltejs/template my-svelte-projectcd my-svelte-projectnpm installnpm run dev
您现在应该有一个在http://localhost:5000上运行的初学者应用程序。添加组件文件夹
初始的Svelte演示有一个App.svelte文件,但还没有组件。我们来设置演示所需的组件。没有components文件夹,因此让我们在src文件夹中创建一个。在这个文件夹中,创建一个Image文件夹-这个文件夹将保存我们演示的组件。
我们将让我们的组件做两件事。首先,他们将检查图像何时进入视口。然后,当图像进入时,组件将等待图像文件加载后再显示它。
第一个组件将是一个,它环绕着第二个组件,一个。我喜欢这个设置的地方在于,它允许每个组件专注于做一件事,而不是试图将一堆操作打包到一个组件中。
让我们从组件开始。观察交叉点
我们的第一个组件将是交叉点的工作实现观察者API。交叉点观察器是一个相当复杂的东西,但它的要点是它监视子元素,并在它进入其父元素的边界框时通知我们。因此,图像:它们可以是某个父元素的子元素,当它们滚动到视图中时,我们可以得到一个提示。
尽管熟悉交叉点观察者API的内部和外部绝对是一个好主意-Travis Almand对它有一个很好的描述-我们将使用一个方便的、丰富的、小巧的组件哈里斯为我们准备的svelte.dev公司.
在深入了解它的具体功能之前,我们将首先对此进行设置。创建一个新的IntersectionObserver.svelte文件并将其放入src/components/Image文件夹。在这里,我们将使用以下代码定义组件:
<script>import{onMount}from\”svelte\”;export let=0;export let=0;export let=false;let!==\”未定义\”){const=new=entries[0].isIntersecting;if(intersecting&once){观察者(容器);}},{rootMargin});观察者,观察者(容器);返回==>window.removeEventListener(\”滚动\”,处理程序);});</script> <style>div{宽度:100%;高度:100%;}</style> <div>
我们可以将此组件用作其他组件的包装器,它将为我们确定包装的组件是否与视口相交。
如果您熟悉小组件的结构,您将看到它遵循一种模式,从脚本开始,进入样式,然后以标记结束。它设置了一些我们可以传入的选项,包括once属性,以及从屏幕边缘开始定义交点的顶部、右侧、底部和左侧距离的数值。
我们将忽略这些距离,而是使用once属性。这将确保图像在进入视口时只加载一次。
组件的主要逻辑在onMount部分中。这就建立了我们的观察者,它用来检查我们的元素,以确定它是否在\”与屏幕的可见区域进行交互\”。
对于较旧的浏览器,它还附加一个滚动事件来检查元素在滚动时是否可见,如果我们确定这个侦听器是可行的,并且***14***是***15***,那么它就会删除这个侦听器。加载图像
让我们使用***16***组件通过将其包装在***17***组件周围来有条件地加载图像。同样,这个组件接收来自***18***的通知,因此它知道是时候加载映像了。
这意味着***19***中需要一个新的组件文件。我们叫它***20***。下面是我们想要的代码:
<script>export let srcexport let altimport IntersectionObserver from\”/IntersectionObserver.svelte\”导入图像自\”/形象。苗条\”</script> <IntersectionObserver>
此组件获取一些与图像相关的道具-***21***和***22***,我们将使用这些道具创建图像的实际标记。请注意,我们在\”脚本\”部分中导入了两个组件,包括刚刚创建的***23***和另一个名为***24***的组件,我们还没有创建它,但马上就要开始了。
这个***25***作为即将创建的***26***组件的包装。看看上面的属性。 我们将***27***设置为***28***,因此图像只在我们第一次看到它时加载。
然后我们使用Svelte的插槽道具。那些是什么?接下来我们来讨论这个问题。开槽属性值
包装组件,比如我们的***29***可以方便地将道具传递给它包含的子对象。Svelte给了我们一个叫做槽道具的东西来实现这一点。
在我们的***30***组件中,您可能注意到这条线:
***31***
这是将相交道具传递到我们给它的任何组件中。在本例中,我们的<ImageLoader>组件在使用包装器时接收prop。我们使用>
***32***组件访问道具。在这种情况下,我们使用一个if条件来检查它的运行时间:
***33***被加载并接收***34***和***35***道具。您可以在这个精巧的教程中了解更多关于吃角子老虎机道具的知识。
我们现在有了代码,可以在将***36***组件滚动到屏幕上时显示它。让我们最终开始构建组件。显示加载的图像
是的,您猜对了:让我们为***39***组件添加一个***37***文件到***38***文件夹。这是接收***40***和***41***道具的组件,并将它们设置在***42***元素上。
以下是组件代码:
***43***和***44***道具,然后定义两个新变量:***45***存储图像是否已加载,和***46***存储对img DOM元素本身的引用。
我们还使用了一个名为***47***的有用的Svelte方法。这为我们提供了一种在DOM中呈现组件后调用函数的方法。在这种情况下,我们为***48***设置了一个回调。在简单的英语中,这意味着它在图像加载完成后执行,并将***49***变量设置为***50***值。
我们将使用CSS显示图像并将其淡入视图。让我们给一组图片加上一个***51***,这样它们一开始是看不见的,尽管技术上是在页面上。然后,当它们与视口相交并且***52***授予加载图像的权限时,我们将图像设置为完全不透明度。我们可以通过设置图像上的***53***属性使其平滑过渡。演示程序将转换时间设置为1200ms,但您可以根据需要加快或减慢转换时间。
这将导致我们进入文件的最后一行,即***54***元素的标记。
***55***如果加载的变量是***57***,则有条件地应用***56***类。它还使用***58***方法将此DOM元素与***59***变量相关联。
本机延迟加载
虽然浏览器中对本机延迟加载的支持几乎已经实现,但目前所有稳定版本都不支持它。我们仍然可以使用简单的功能检查来添加对它的支持。
在我们的***60***文件中,我们可以引入***61***函数,并在其中检查浏览器是否支持延迟加载。
***62***条件以包含此***63***布尔值。
***64***
最后,在***65***,我们告诉浏览器使用延迟加载,方法是在***66***元素中添加>。
***67***文件并插入以下代码以导入我们的组件并使用它:
<script>从\”/components/Image\”导入ImageLoader/图像加载器.svelte\”;</script> <ImageLoader>
再次演示:CodePen Embed Fallback
请记住,欢迎您在GitHub上下载此演示的完整代码。如果你愿意的话

CSS在Svelte中延迟加载图像 为WP2原创文章,链接:https://www.wp2.cn/css/css%e5%9c%a8svelte%e4%b8%ad%e5%bb%b6%e8%bf%9f%e5%8a%a0%e8%bd%bd%e5%9b%be%e5%83%8f/