在前端开发中，我们通常会使用link元素来引入CSS样式表。但是，在某些情况下，当CSS文件加载完毕后需要执行一些操作，例如调用一些JavaScript代码或者初始化一些组件。这时候就需要使用到link元素的onload事件了。
link元素的onload事件
link元素有一个onload事件，它会在CSS样式表加载完成后触发。我们可以使用该事件来执行一些JavaScript代码或者进行其他操作。
<link rel="stylesheet" href="style.css" onload="console.log('style loaded')">上面的代码中，当style.css文件加载完成后，控制台会输出"style loaded"。
使用link元素的onload事件预加载图片
我们可以利用link元素的onload事件来预加载图片。具体方法是，在HTML页面中添加一个link元素，并设置其href属性为待预加载的图片地址，然后监听link元素的onload事件。当onload事件触发时，表示图片已经被加载完成。
<head>
<link rel="preload" as="image" href="image.jpg" onload="console.log('image loaded')">
</head>上面的代码中，我们使用link元素预加载了一张图片，并在图片加载完成后输出了"image loaded"。需要注意的是，我们在link元素中使用了preload属性，这是因为预加载图片是一种比较特殊的资源加载方式，其具体原理和使用方法可以参考MDN Preloading content。
使用link元素的onload事件动态加载CSS
有时候，我们需要在页面运行时动态加载一些CSS样式表。这时候，我们可以使用JavaScript创建一个link元素，并设置其href属性为待加载的CSS文件地址。通过监听link元素的onload事件，我们可以在CSS文件成功加载后执行一些操作。
-- -------------------- ---- -------
------- ------------------------ ------------
--------
-------- --------- -
--- ---- - -------------------------------
-------- - -------------
--------- - ------------
----------- - ---------- -
---------------- ---------
--
--------------------------------
-
---------上面的代码中，我们定义了一个loadCSS函数，在该函数中创建了一个link元素，并设置了其href属性为"style.css"。当该CSS文件加载完成后，控制台会输出"CSS loaded"。
总结
link元素的onload事件是一个非常实用的特性，它可以让我们在CSS文件加载完成后执行一些操作，例如预加载图片、动态加载CSS等等。掌握了这个特性，我们可以更加灵活地开发前端应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/27090