程序员经验分享-hwhale

使用lazysizes进行图片填充和延迟加载

2024-01-02

我正在尝试使用延迟加载和图片填充来工作。

如果我只使用基本图像，延迟加载本身就可以工作：

<img class=lazyload data-srcset="http://placehold.it/301x301">

如果我检查 Chrome 中的网络选项卡，我可以看到图像是在红线之后加载的，所以一切都很好：

现在我添加了一个<picture>元素与我的响应式图像并尝试加载它也很懒：

<picture>

    <!--[if IE 9]><video style="display: none;"><![endif]-->
    <source srcset="http://placehold.it/1370x301 1x, http://placehold.it/2055x450 2x" media="(min-width: 1024px)" />
    <source srcset="http://placehold.it/1023x300 1x, http://placehold.it/1534x450 2x" media="(min-width: 768px)" />
    <source srcset="http://placehold.it/767x300 1x, http://placehold.it/1151x450 2x" media="(min-width: 384px)" />
    <!--[if IE 9]></video><![endif]-->

    <img
            class="lazyload"
            style="width: 100%; max-width: 100%;"
            alt="Sample pic"
            data-srcset="http://placehold.it/383x300 1x, http://placehold.it/575x450 2x"
    />

</picture>

Unfortunately, this image is not lazyloaded but loaded directly: enter image description here

我还尝试在图片元素图像中仅使用一个 src，但这没有什么区别。

根据lazysizes文档，应该可以使其一起工作，所以我想我只是错过了一个小细节？

更新：Lazysizes 和 Picturefill 均已加载到<head>.


你需要使用data-srcset代替srcset:

<picture>

    <!--[if IE 9]><video style="display: none;"><![endif]-->
    <source data-srcset="http://placehold.it/1370x301 1x, http://placehold.it/2055x450 2x" media="(min-width: 1024px)" />
    <source data-srcset="http://placehold.it/1023x300 1x, http://placehold.it/1534x450 2x" media="(min-width: 768px)" />
    <source data-srcset="http://placehold.it/767x300 1x, http://placehold.it/1151x450 2x" media="(min-width: 384px)" />
    <!--[if IE 9]></video><![endif]-->

    <img
            class="lazyload"
            style="width: 100%; max-width: 100%;"
            alt="Sample pic"
            data-srcset="http://placehold.it/383x300 1x, http://placehold.it/575x450 2x"
    />

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

image

lazyloading

responsiveimages

picturefill

使用lazysizes进行图片填充和延迟加载 的相关文章

  • HTMLImageElement 作为 React Child 无效

    我正在尝试异步加载图像 并且仅在加载图像后才将其显示在 React 应用程序中 componentDidMount const img new Image img onload gt this setState originalImage

  • 如何加载图像文件到ImageView？

    我试图在从文件选择器中选择图像文件后立即显示该图像文件 文件选择器仅限于 png 和 jpg 文件 所选文件存储在文件类型的变量中 为此 我设置了一个 ImageView 我希望用这个新文件设置图像 唯一的问题是它的类型是文件而不是图像 如

  • 您如何在 Android 上处理超高 MP 相机（和图像）？ - “画布：尝试绘制太大的位图”

    我有一个活动 用户可以像这样打开相机 getPictureUri createImageFromFile true let photoUri it openCameraActivity REQUEST IMAGE CAPTURE it ph

  • Java中读取图像文件的方式有什么区别？

    在java中读取图像文件有多种方法 例如BufferedImage and ImageIcon仅举几例 我想知道这些情况有什么区别 它们是否依赖于上下文 在特定情况下只能使用其中一个 阅读所选图像的最佳方式是什么JFileChooser由用

  • 将base64图像转换为Node Js中的文件

    我是 Node Js 新手 我需要包含用户的个人资料图片 我从 IOS 应用程序收到 Base64 图像的请求 我需要将其存储在 images 文件夹中并将图像路径保存在 mongodb 数据库中 我使用了以下代码 var bitmap n

  • Matlab下降低图像质量

    问候 我正在尝试找到一种简单的方法来处理图像 以便将其质量从 8 位降低到 3 位 实现这一目标的最简单方法是什么 干杯 如果要线性缩放 只需将每个像素值除以 255 7 即 如果原始图像存储在矩阵 I 中 则让低分辨率图像 J I 255

  • 使用 Opera 在 JavaScript 中更新图像源

    我定期使用 Image 对象加载远程图像 以便稍后在画布上绘制 Image 对象仅在 JS 中创建 它不存在于 DOM 中 该代码在 Chrome 和 Firefox 上运行良好 在 Opera 中 问题在于 每当修改图像源时 浏览器似乎总

  • 从 mx:Image 复制位图数据

    如何从 mx image 组件复制位图数据 我需要在应用程序的多个屏幕中显示相同的图像 并且不想多次下载该图像 我可以只使用 urlrequest 将图像下载为位图并复制它 但我喜欢只设置图像组件的源的方式 Image延伸SWFLoader

  • JFrame 图标在 Ubuntu 12.04 中不显示

    我使用一些图像图标开发了一个 Swing 应用程序 应用程序 jar 文件在 Windows 中按预期工作 但相同的 jar 文件在 Ubuntu 12 04 操作系统上不显示框架的图像图标 我的示例代码 ImageIcon ImageIc

  • Java 扫描仪问题 (JFrame)

    我正在尝试使用扫描仪来编辑塔防游戏的级别 但是 它不会将级别 图块图像 更新为自定义文件的级别 0 是草 1 是石头 1 是什么都没有 等等 我发现了错误 但如何修复它 我需要添加 更改什么才能消除这个错误 java lang NullPo

  • 超大图像缩小后变得模糊

    这是我第一次尝试响应式设计 所以如果这是一个愚蠢的简单问题 请原谅 我创建了一个图像并将其最大宽度设置为不大于图像的实际宽度 因为我知道放大图像会导致模糊不清 我有点困惑的是 当我缩小窗口并且图像开始缩小时 它也变得模糊 这是正确的行为吗

  • 图像映射区域周围不需要的边框

    我正在使用带有圆形区域的图像贴图 问题是我在 IE7 中的区域周围出现了不需要的边框 此边框不会出现在 FF 和 Chrome 中 也不会出现在 IE8 IE9 中 我尝试向图像添加 border 0 锚点的 css 属性 即 a bord

  • Python Flask 不更新图像[重复]

    这个问题在这里已经有答案了 这里有一些关于图像的 Flask 问题 但没有一个能解决我的问题 我有一个应用程序可以创建图像 保存它 然后显示它 一次 它应该多次执行此操作 每次更改图像时 它应该加载新图像 它不是 它只显示与其显示的文件名关

  • 特定日期的plotly js图像标记

    我正在使用这个例子 https plot ly javascript images add multiple images https plot ly javascript images add multiple images并尝试在特定日

  • Python：将 xml 文件转换为图像

    我希望使用 python 脚本将 xml 文件转换为图像 最好是 png 文件 我没有从我的在线研究中找到太多信息 我正在尝试使用 PIL 从这个帖子 https stackoverflow com questions 5741803 co

  • 在 tlistbox 中绘制缩略图

    在 DelphiXE 中 我使用 tFileOpenDialog 选择一个文件夹 然后在 tListBox 中列出该文件夹中的所有 jpg 文件 我允许将列表项拖放到列表中进行自定义排序 以便稍后按顺序显示它们 我希望能够在文件名旁边绘制图

  • Bing 图像搜索 API 按图像大小过滤

    我正在使用 jsonp 和 jquery ajax 来使用 Bing 图像搜索 API 我能够检索搜索结果 但我无法找到按图像大小过滤结果的方法 我在文档中找不到任何与此相关的内容 有谁知道是否有一种方法可以按图像大小过滤结果或对此进行任何

  • 从 URL 任何文件类型创建图像

    我知道imagecreatefromgif https www php net manual en function imagecreatefromgif php imagecreatefromjpeg https www php net

  • 如何使用 PHP 从 MSSQL 读取图像字段

    我正在创建一个网站 需要同步从离线 MSSQL 服务器读取的在线 MySQL 数据库 除图像字段外 所有通信和从 MSSQL 读取所有字段均工作正常 我已经使用 PHP 和 Mysql 一段时间了 知道如何向 MySQL 数据库插入 检索图

  • Drupal 8 图像与图像样式

    在drupal 7中 我使用函数image style url style uri 生成具有样式的新图像并返回图像的路径 那么在 drupal 8 中会用什么来代替它呢 谢谢 Per the 变更记录 https www drupal or

随机推荐

  • CLR 如何处理静态类？

    谁能解释一下 CLR 如何处理静态类 CLR 是否创建一个单例实例来在内部处理静态类 如果不是 为什么 C 中有静态构造函数 根据我的理解 我们仅使用构造函数来实例化类 首先 CLR中没有静态类 CLR 对静态类一无所知 这是C 的特点 静

  • 记录到多个输出

    go语言有没有办法记录不同级别的多个输出 我想要一个程序 它可以同时记录到信息级别的标准输出和带有时间戳的调试级别的文件 就像我每次编码一样 log Debug Entering some func res func log Infof R

  • 取消libcurl轻松处理

    有没有一种简单的方法可以从另一个线程取消curl easy perform 您必须使用回调函数 写入 读取 进度 来执行取消 另一个线程需要设置一个标志 回调函数检查该标志并返回正确的值以取消操作

  • Numpy 从矩阵中提取行、列和值

    我有一个矩阵 我想编写一个脚本来提取大于零的值 其行号和列号 因为该值属于该 行 列 这是一个示例 from numpy import import numpy as np m np array 0 2 4 4 0 4 5 4 0 inde

  • 并行编程和多核编程有什么区别？

    我认为这个话题已经说明了一切 并行编程和多核编程之间有什么区别 如果有的话 谢谢 多核是并行编程的一种 特别地 它是一种MIMD http en wikipedia org wiki Flynn 27s taxonomy处理单元不是分布式的

  • Mysql查询平均时间

    我玩很多棋盘游戏 并且维护一个网站 数据库来跟踪一些统计数据 其中一张表记录了不同的时间 它的结构如下所示 gameName 文字 棋盘游戏的名称 人数 int 玩过的人数 时间到达 时间戳 我们到达我们正在玩游戏的房子的时间 开始安装 时

  • Angular - 不同的路线，相同的模板/控制器，不同的加载方法

    我想使用路线 但我总是想使用相同的模板和控制器 我有这样的路线 a albumid and i imageid 在第一种情况下 我想加载图像数组并将它们添加到列表中 在第二种情况下 我想加载单个图像并将其添加到列表中 所以区别仅在于数据加载

  • Visual Studio 2010 C++ 调试符号已加载但找不到源代码

    我已在 2010 内指定了符号 pdb 文件 以便正确加载它 但我得到了No source available错误和Browse to Find Source Code是灰色的 有谁知道我如何指定源代码目录或查看 pdb 内部以找出它在哪里

  • Vagrant“未创建虚拟机。”当尝试从现有虚拟机创建盒子时

    我导入了 Precision32 盒子 然后在虚拟机上安装了一些软件包和其他数据 我的计划是将其重新打包到一个盒子中 以在共享时节省复杂的配置 然而 vagrant package base dev vm output box vm box

  • 根据R中的条件计算平均值

    参考问题 根据条件计算平均值 https stackoverflow com questions 45206230 calculating average of based on condition 45206365 noredirect

  • CKEditor4 销毁，不保留原始 HTML 内容。如何禁用过滤器？

    我正在使用标准演示 像这样 http ckeditor com latest samples replacebyclass html 因此 主要选项 小变化 可以标记为config js Example https stackoverflo

  • 执行 javascript 和 php csv 导出脚本的最佳方法

    我有一个生成 HTML 表格的 PHP 页面 在页面底部 您可以单击 提交 按钮 表中的数据将发送到名为 Table2CSV 的 jquery 脚本 链接在这里 http www kunalbabre com projects table2

  • Linux中如何设置环境变量LD_LIBRARY_PATH

    我首先执行了命令 export LD LIBRARY PATH usr local lib 然后我就打开了 bash profile file vi bash profile 在这个文件中 我放入 LD LIBRARY PATH usr l

  • npm 脚本中的 Autoprefixer 显示 TypeError：模式必须是字符串或字符串数​​组

    当我运行 npm run prefix css 时 它显示 类型错误 模式必须是字符串或字符串数 组 name natours version 1 0 0 description A natours project main index j

  • Vim 自动滚动缓冲区

    我正在尝试做一些非常简单的事情 我在 Vim 中有两个缓冲区 一个包含源代码 B1 另一个包含文本文件a txt B2 B1中的源代码在Vim中使用自定义快捷方式运行 填充a txt带有文字 我希望 Vim 在每次更新时自动滚动 B2 即使

  • django makemigrations 无需用户输入即可重命名字段

    我有一个名为 CharField 的模型oldName 我想将该字段重命名为newName 当我跑步时python 管理 py makemigrations 我收到确认请求 您是否将 model oldName 重命名为 model new

  • 在 Keras 中获取每个类别的精确度、召回率和 F1 分数

    我使用 Keras 2 1 5 中的 TensorFlow 后端训练了一个神经网络 并且还使用了 keras contrib 2 0 8 库来添加 CRF 层作为网络的输出 我想知道在使用神经网络对测试集进行预测后如何获得每个类别的精度 召

  • Oracle Regexp 将 \n、\r 和 \t 替换为空格

    我试图从包含换行符 NL 字符 可能还包含其他字符 的表中选择一列 n r t 我想使用 REGEXP 选择数据并用空格 替换 仅这三个 字符 不需要正则表达式 这可以通过 ASCII 代码轻松完成 并且可以使用无聊的旧代码翻译 https

  • 错误：无法解析模块“react-native-gesture-handler”

    我尝试在react native中使用导航 我补充道 npm install save react navigation 但它给了我这样的错误 错误 捆绑失败 错误 无法解析模块react native gesture handler fr

  • 使用lazysizes进行图片填充和延迟加载

    我正在尝试使用延迟加载和图片填充来工作 如果我只使用基本图像 延迟加载本身就可以工作 img class lazyload 如果我检查 Chrome 中的网络选项卡 我可以看到图像是在红线之后加载的 所以一切都很好 现在我添加了一个

热门标签