企业官网建设流程全解析

免费企业网站模板下载,郑州职业技术学院,免费网站建设专业的公司,河北省网站快速备案点击上方 前端Q#xff0c;关注公众号回复加群#xff0c;加入前端Q技术交流群近年来 html 的最好改进之一是你可以添加到图像#xff08;也包括 iframe#xff09;的 loadinglazy 属性#xff0c;它将告诉浏览器直到图像出现在视口才加载图像。img src关注公众号回复加群加入前端Q技术交流群近年来 html 的最好改进之一是你可以添加到图像也包括 iframe的loadinglazy属性它将告诉浏览器直到图像出现在视口才加载图像。img src/images/your-image.png loadinglazy非常简单非常实用。但如果你也能对脚本做同样的事情那该多好。这样你就可以懒加载你的组件只有当它们实际需要时才加载...嗯img元素还有另一个功能就是使用onload和onerror属性在图像加载或未加载后运行脚本。img src/images/your-image.png loadinglazy onload() console.log(image loaded)这个onload“回调”只有在图像加载时才会触发如果图像是懒加载的那么它只会在图像出现在视口时触发。噔噔噔一个懒加载的脚本。很遗憾像这样它并没有什么用处。首先你会在页面上出现一个不需要的图片其次你需要将想要运行的 javascript 内联化这有点违背了懒加载的初衷。所以让我们做一些改变来改进这一点。图片本身可以是任何东西或者更重要的是什么都没有。正如我之前提到的有onerror回调正如其名称所暗示的当图片没有加载成功时会触发。这并不意味着你需要将src指向一个不存在的图片那样会导致控制台充满关于缺失图片的红色 404 错误没有人想要这样。如果src图片实际上不是一个图片onerror回调也会触发而最简单的方法是使用data:格式“错误地编码”一个图片。这也具有不向控制台填充缺失图片警告的好处。img srcdata:, loadinglazy onerror() console.log(image not loaded)这仍然会导致页面出现损坏的图像缩略图但我们会解决这个问题的。好的但我们仍然需要将想要运行的 javascript 内联那么我们该如何修复这个问题呢既然 ES 模块支持几乎已经普及我们可以使用非常强大的事件导入后默认 javascript 加载技术来在事件触发后加载脚本如下所示img srcdata:, loadinglazy onerrorimport(/js/some-component.js).then(_ _.default(this))注意这也适用于onclick、onchange等事件。注意下划线只是访问模块的简写方式你也可以写成.then(Module Module.default(this))好了这里到底是怎么回事首先让我们看看 some-component 可能的样子// some-component.js export default element { element.outerHTML div classwhatever pHello world!/p /div ;}所以你可能已经注意到在onerror回调中我将this作为参数传递给了默认导出。我这样做的原因抱歉用词不当是为了给调用它的脚本提供img因为在当前我又犯错了的上下文中this img。现在你可以简单地element.outerHTML替换损坏的图片为你自己的 HTML 标记然后你就有了懒加载的脚本缓存和传递参数如果您在页面上多次使用此技术那么您需要向data:,传递一个缓存破坏索引或随机数例如img srcdata:,abc123 loadinglazy onerrorimport(/js/some-component.js).then(_ _.default(this))img srcdata:,xyz789 loadinglazy onerrorimport(/js/some-other-component.js).then(_ _.default(this)):,后面的字符串可以是任何内容只要它们不同即可。将参数传递给函数的一个非常简单的方法是在 HTML 中使用data-something属性如下所示img srcdata:, loadinglazy >由于我们将this传递给了函数你可以像这样访问data属性export default element { const { message } element.dataset element.outerHTML div classwhatever p${message}/p /div ;}往期推荐Claude Code 算是被我玩明白了Ant Design 6.0 来了这一次它终于想通了什么15 个 Node.js 新功能替代流行 NPM 包最后欢迎加我微信拉你进技术群长期交流学习...欢迎关注「前端Q」,认真学前端做个专业的技术人...点个在看支持我吧