程序员经验分享-hwhale

如何使用 srcset 延迟加载图像？

2024-01-08

我在用着slick.js http://kenwheeler.github.io/slick/构建一个旋转木马。但是，即使我将属性从src to data-lazy在我滚动到该图像之前，图像仍然会被加载。我怀疑这是因为我有srcset在我的图像中标记。我的问题是如何防止浏览器加载响应式图像或如何正确地延迟加载响应式图像。

这是我的 img 标签的示例

<img data-lazy="better_me.jpg" srcset="better_me.jpg 400w, better_me.jpg 200w" class="avatar photo avatar-200" alt="better_me" width="200" height="200" sizes="(min-device-resolution: 1.6) 400px, 200px">

惰性尺寸 https://github.com/aFarkas/lazysizes工作正常。然而，您需要将标记更改为类似这样的内容。

<img data-src="better_me.jpg" data-srcset="better_me2.jpg 400w, better_me.jpg 200w" class="avatar photo avatar-200 lazyload" data-sizes="auto" alt="better_me" width="200" height="200" />

Note srcset更改为data-srcset and data-lazy更改为data-src。此外，您还必须添加lazyload 类。

Your sizes属性没有太大意义。也许您想使用 x 描述符？或者简单地使用sizes="200px"？我不知道。我只是将其切换为data-sizes="auto"，所以它会自动为您计算。 （但在这种情况下，在加载图像之前，图像尺寸必须是可计算的。）

lazySizes 确实加载图像before他们进入视野。这对于用户体验来说是一个很大的提升。将某些内容滚动到视图中的用户不想等待。延迟加载程序在图像已在视图中后开始下载图像会破坏用户体验。

lazySizes 的一个好处是，这个惰性加载程序会检查浏览器当前是否正在大量下载，并根据这一事实决定是仅下载视图图像还是预加载近视图图像。

但如果你不想要这个，你可以通过设置“lazySizes”来控制它expand and expFactor选项。

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

jQuery

html

css

slickjs

如何使用 srcset 延迟加载图像？ 的相关文章

  • JavaScript：常量属性

    在javascript中 我可以将对象的属性声明为常量吗 这是一个示例对象 var XU Cc Components classes or function aXU this Cc Components classes var XU new

  • “|”是什么意思（单管道）在 JavaScript 中做什么？

    console log 0 5 0 0 console log 1 0 1 console log 1 0 1 为什么0 5 0返回零 但任何整数 包括负数 都返回输入整数 单管道 有什么作用 这是一个按位或 https developer

  • Firebase 身份验证在 iOS 登录时卡住，没有错误

    我已经使用电子邮件和密码设置了 firebase 身份验证登录的最基本实现 firebase auth signInWithEmailAndPassword email password then gt console log Logged

  • 类型“void”不可分配给类型“((event:MouseEvent) => void) |不明确的'

    import as React from react import App css import PageTwo from components PageTwo export interface IPropsk data Array

  • 如何在 javascript 中基于类型字符串创建新对象？

    如何基于变量类型字符串 包含对象名称 在 javascript 中创建新对象 现在我有 随着更多工具的出现 列表会变得更长 function getTool name switch name case SelectTool return n

  • 如何知道浏览器空闲时间？

    如何跟踪浏览器空闲时间 我用的是IE8 我没有使用任何会话管理 也不想在服务器端处理它 这是纯 JavaScript 方法来跟踪空闲时间 并在达到一定限制时执行一些操作 var IDLE TIMEOUT 60 seconds var idl

  • put方法中的Angularjs文件上传不起作用

    我有一个简单的待办事项应用程序 我试图在其中上传照片和单个待办事项 现在我已经创建了这个工厂函数来负责待办事项的创建 todosFactory insertTodo function todo return http post baseUr

  • 尝试使用 Firebug 查找 JavaScript 文件中的函数

    我试图找到这个函数调用 myFooBar 该函数在某些 HTML 中内联引用 但页面加载了大量 JavaScript 并且在每个文件中搜索该函数需要相当多的工作 如何使用 Firebug 找到此函数所在的 JavaScript 文件 打开脚

  • Twitter bootstrap 3表单水平和单行多个输入列

    我需要将多列输入放在单行中 如下所示 我通过将多个输入分组为一个来做到这一点form group 但是这样我不能使用has error class div class form group div

  • PHP 共享标头而不使用服务器端脚本？

    到目前为止我总是通过 PHP 解决简单的问题 您有一个包含页眉 菜单 页脚和内容字段的网站 每个页面的页眉 菜单和页脚通常是相同的 在没有 PHP 或任何其他服务器端语言的情况下 如何使页眉 菜单和页脚数据仅存在于一个文件中 例如 您不会有

  • 如何取消 AjaxForm 上的提交

    我正在使用 jQuery 插件 ajax 形式 我尝试实现这样的东西 MyFormID ajaxForm dataType json resetForm true beforeSubmit function validateData ret

  • 根据特定字符获取整个字符串或子字符串

    我有一个包含 MIME 类型的字符串 例如application json 现在我想将其与实际的 HTTP 标头进行比较 在本例中content type 如果标头包含 MIME 类型 那么就很简单 if mimeType contentT

  • JavaScript 提升解释

    下面的片段有什么区别 var a 0 function b a 10 return function a b console log a gt 10 and var a 0 function b a 10 return function a

  • Javascript onload 不起作用[关闭]

    这个问题不太可能对任何未来的访客有帮助 它只与一个较小的地理区域 一个特定的时间点或一个非常狭窄的情况相关 通常不适用于全世界的互联网受众 为了帮助使这个问题更广泛地适用 访问帮助中心 help reopen questions 我正在使用

  • 弹出窗口的动态高度取决于内容，可能吗？

    是否有可能获得一个宽度始终为 400px 的弹出窗口 但根据弹出窗口中的内容动态高度 我已经看到了这个 但不知道如何将其应用到弹出窗口 调整 iframe 的宽度高度以适应其中的内容 https stackoverflow com ques

  • 使用 AJAX 和 JQuery 按设定的时间间隔刷新 Rails 部分

    I have a page in my rails application that looks like 现在 我有另一个用 python 编码的人工智能应用程序 它处理视频 显示在 Rails 应用程序页面的左侧 并使用捕获的车辆及其相

  • 如何：带有 onclick 的 div 位于另一个带有 onclick 的 div 中

    只是一个简单的问题 我遇到了 div 与 onclick javascript 之间的问题 当我点击内部 div 时 它应该只触发它的 onclick javascript 但外部 div 的 javascript 也会被触发 用户如何点击

  • AngularJS 在指令运行之前通过 AJAX 检索数据

    我正在使用 AngularUIuiMap http angular ui github com directives map实例化谷歌地图的指令 uiMap 指令非常适合处理硬编码数据 mapOptions and myMarkers 但是

  • 搜索多维数组 JavaScript

    我有一个如下所示的数组 selected products 0 r1 7up 61 Albertsons selected products 1 r3 Arrowhead 78 Arrowhead selected products 2 r

  • JQuery 删除和内存泄漏

    我正在开发一个游戏 我看到了很多内存消耗 我使用jquery animate 动画完成后 我 remove 元素 我的问题是 从 dom 树中删除一个元素后 对象还存在记忆中吗 Javascript 是一种垃圾收集语言 这意味着当没有代码保

随机推荐

  • 确定夏令时是否有效？ SQL服务器

    我有一个包含用户 UTC 时间偏移以及他们是否遵守夏令时的表 是否有内置方法可以获取正确的用户时间 这并非在所有情况下都有效 但对于美国 DST 定义为 3 月第 2 个星期日到 11 月第 1 个星期日之间的用户来说 这是一个快速解决方案

  • Pandas DataFrame.to_csv 引发 IOError：没有这样的文件或目录

    你好 我正在尝试使用Pandas DataFrame to csv方法来保存dataframe to a csv file filename dir name csv df to csv filename 但是我收到错误 IOError E

  • iTextSharp - XFA 填充日期/时间字段

    工作流程是这样的 我们下载一个模板表单 预填充静态值 导出 XML 模板 使用 NET 表单应用程序解析 XML 添加动态值 生成的 XML 需要重新导入到 PDF 模板中 在 iTextSharp 上使用 MergeXfaData 方法一

  • xlwings - 删除一系列行

    我似乎找不到一种方法来删除从第 x 行开始到工作表底部的一系列行 例如在VBA代码中我会这样做 Rows CStr currRow 65536 Select Selection Delete Shift xlUp 其中 currRow 可以

  • 降低 Vuetify 下拉菜单的高度

    我无法降低 Vuetify 下拉组件的高度v select 我尝试使用道具dense但它只会降低要选择的选项的高度 并且不会对关闭的下拉列表产生任何影响 我尝试了以下模板代码

  • Android O：通知通道本地化

    我创建了一个这样的通知通道 NotificationChannel channel new NotificationChannel CHANNEL ID FOOBAR getContext getString R string notifi

  • 利用 BackGroundWorker 在 Winforms 控件上跨线程调用 GUI 操作？

    受到我自己使用多线程 Winforms 应用程序的经验以及诸如此类的问题的启发 避免跨线程 WinForm 事件处理中 Invoke BeginInvoke 的麻烦 https stackoverflow com questions 136

  • 如何使用鼠标拖动来画线？

    我需要使用光标在delphi中画一条线 我已经创建了线代码 但我不知道下一步该做什么 如何才能做到这一点 我按下鼠标 当线条需要开始并拖动鼠标时 或者简单地释放鼠标按钮并绘制线条 procedure TForm1 Button1Click

  • 如何查明在我的 servlet 中按下了哪个 HTML 按钮？

    我正在创建一个包含两个提交按钮的注册表单 我需要知道在我的 servlet 代码中单击了表单中的哪个按钮 阅读以下问题的答案这个问题 https stackoverflow com questions 5222 accessing post

  • 获取有关 LLDB 中错误内存地址的信息

    我正在尝试在我的 iPhone 应用程序中调试 EXC BAD ACCESS 它在方法调用时崩溃 并且该方法的行是EXC BAD ACCESS code 1 address xxx 以前 我只会使用gdb info malloc histo

  • 一堂课可以延长两堂课吗？

    我的班级应该同时扩展两个班级 public class Preferences extends AbstractBillingActivity public class Preferences extends PreferenceActiv

  • R中根据字符分割字符串

    我的数据集中有一列 其中有一个我想要拆分的字符串 df data frame col c BrBkRY BBkRBr YBRG RBBk 这是我想用来有条件分割的向量 sep c Br Bk R Y B G 这就是最终的样子 我是用手做的

  • 如何将 Maven 嵌入到我的应用程序中？

    我想将 Maven 或能够发挥所有作用的库嵌入到我的 Java 应用程序中 要点 这是我想要执行的两项任务 1 在本地存储库中发布 jar2 在私有企业存储库 Nexus 中发布jar 所有必需的 jar 必须位于公共 Maven 存储库中

  • 烧瓶蓝图模板文件夹

    我的烧瓶应用程序布局是 myapp run py admin init py views py pages index html main init py views py pages index html init py 文件为空 管理

  • RestKit、CoreData 和 Swift - 我似乎无法取回结果

    我已经在一个新的基于 Swift 的应用程序 当前是 XCode 6 beta 3 中成功设置了 RestKit 到 CoreData 的映射实现 我知道导入映射正在通过我的 RestKit JSON 调用进行工作 因为我可以检查 sqli

  • 如何将WTL和ATL添加到Visual Studio C++ Express 2008

    我开始在家使用Visual Studio C Express 2008 但里面没有ATL 如何将 ATL 添加到 Visual Studio C Express 2008 ATL 7 1 现在是Windows 驱动程序套件 http www

  • 哪些版本的 IE 支持 PNG 图标？

    在这个旧的 StackOverflow 帖子中 https stackoverflow com questions 1344122 favicon png vs favicon ico why should i use pngs inste

  • 如何检查数组是否是多维的？ （jQuery）

    我有两个 AJAX JSON 响应数组 一维 fili Chif Bart deme Bomb Jyui Joiu FDPi Doen abcd drog MAIC Jasi abcd Jere Jibi 三个维度 5 2 N L 7 C

  • 通过 D3 绘制 HTML 表格不会更新现有数据

    我正在使用 D3 绘制 HTML 表格 输入后效果很好 当我将新项目添加到数据集合时 它会正确地将新项目添加到表中 问题是每当我更新集合中的现有对象 下面的 backgroundJobs 集合中的对象 时 当我重新运行 D3 代码来同步表时

  • 如何使用 srcset 延迟加载图像？

    我在用着slick js http kenwheeler github io slick 构建一个旋转木马 但是 即使我将属性从src to data lazy在我滚动到该图像之前 图像仍然会被加载 我怀疑这是因为我有srcset在我的图像

热门标签