Responsively Lazy

延迟加载响应式图像的库
授权协议 MIT
开发语言 JavaScript
所属分类 Web应用开发、 常用JavaScript包
软件类型 开源软件
地区 不详
投 递 者 宋腾
操作系统 跨平台
开源组织
适用人群 未知
 软件概览

Responsively Lazy 是一个可以延迟加载响应式图像的库。能够处理响应式图像、SEO 友好(有效的 HTML)并支持 WebP 格式。

下载并安装

下载缩小后的 css 和 js 文件或通过 npm 和 bower 安装

npm install responsively-lazy
bower install responsively-lazy

该库没有任何依赖项,它只有 1.1kb。

用法

  • 在 head 标签中包含 css 文件
<link rel="stylesheet" href="responsivelyLazy.min.css">
  • 在 body 标签结束前包含 js 文件
<script async src="responsivelyLazy.min.js"></script>
  • 为每张图片添加以下代码
<div class="responsively-lazy" style="padding-bottom:68.44%;">
    <img alt="" src="images/2500.jpg" data-srcset="images/400.jpg 400w, images/400.webp 400w, images/600.jpg 600w, images/1000.jpg 1000w" srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" />
</div>

要自定义的内容是 padding-bottom 样式,以及 src 和 data-srcset 属性的值。如果不知道图像纵横比,可以跳过 div 标签并将 Responsively Lazy 类移动到 img 标签:

<img class="responsively-lazy" alt="" src="images/2500.jpg" data-srcset="images/400.jpg 400w, images/400.webp 400w, images/600.jpg 600w, images/1000.jpg 1000w" srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" />

如果浏览器支持,可以以 WebP 格式列出图像版本。

浏览器支持

Responsively Lazy 适用于支持 srcset 属性的浏览器。不受支持的浏览器将在 src 属性中加载图像。

 相关资料
  • 问题内容: 我正在开发一个eshop。在基于类别的产品页面上,我放置了一些基于javascript的过滤器。但是,如果类别具有很多产品,则会出现问题。该链接具有与我相似的功能… 这个页面多么缓慢,却超过2mb !!! 对我来说,每个产品都需要一半的K字节,但是图像是个问题。.因此,我正在寻找如何延迟加载图像的方法。由于与该网站不同,我的页面具有分页功能,因此我认为加载仅对页面可见的图像是一种解决方

  • 我正在使用这个插件jQuery延迟内容、图像和背景延迟加载程序 我尝试在延迟加载后向图像添加图像边框颜色和图像边框厚度,但似乎没有效果。若我在开发者控制台按“inspect”,我可以看到这个属性被添加到图像样式中,但它的效果并没有显示在屏幕上。 超文本标记语言 JQuery

  • 我正在使用Mika Tuupola的jQuery延迟加载。 是否可以在每次延迟加载图像后调用函数。 我打算做的是跟踪图像的浏览次数。因此,如果图像是延迟加载的,这意味着用户已经看到了图像,我将通过在后台执行HTTP GET,将数据库中的计数器增加1。

  • 我有一个HTML,使用 我想做的是懒惰加载图像的性能。我尝试了几个包,如react-lazyload,但它似乎并没有懒惰加载图像的方式。如果我将超文本标记语言字符串拉到React组件中,它确实有效。 延迟加载如何处理从加载的图像?我怎样才能懒散地加载图像?

  • Flask 通常配合装饰器使用,装饰器使用非常简单,而且使您可以将 URL 和处理它的函数 放在一起。然而这种方法也有一种不足: 这就意味着您使用装饰器的代码必须在前面导入, 否则 Flask 将无法找到您的函数。 这对于需要很快导入的应用程序来说是一个问题,这种情况可能出现在类似谷歌的 App Engine 这样的系统上。所以如果您突然发现您的引用超出了这种方法可以处理 的能力,您可以降级到中央

  • 我试图使用jQuery懒惰加载在我的Laravel/Vue项目,但我正在努力让图像出现在我的Vue组件。我有以下img块,我认为会工作: 我确实在这里发现了另一个问题-Vue.js模板中的静态图像src-但是当我尝试该方法时,我得到了这样的结果: 因此,我切换回v-bind方法,但我得到的只是一个带有灰色边框的白色框-没有图像。但是,如果我在src属性上使用v-bind,我可以正确地看到图像。 我

  • 我似乎不能为我的生活得到任何图像懒惰加载插件在wordpress工作。我尝试了懒负载,wp懒负载和bj懒负载。网站上的图像似乎没有一个是“懒惰加载”的。我也使用审计工具(chrome审计)测试了这个。当我删除图像(每页大约有50张图像)时,我的审计绩效和其他分数为99。当我加载图像(使用wordpress循环),我的性能下降到64. 我尝试了每一个延迟加载插件,但它们似乎都不是延迟加载。我正在本地

  • 我想做一个reactjs页面懒惰加载图像。因此,我调用lazyLoadImages()内部的组件didMount()。我发现位于浏览器选项卡的浏览器加载指示器仍然一路旋转,直到加载所有图像。这让我认为我所做的并没有提供真正的懒惰加载图像体验。 有趣的是,如果我在setTimeout中用一个不太短的timeout参数包装lazyLoadImages(),例如100ms(不是0或甚至50ms),那么页