阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      jQuery Lazy Load

      插件 jquery_lazyload 中文 API 文档

      Lazy Load Remastered

      延迟加载延迟了长网页中图像的加载。

      在用户滚动到视口之外的图像之前,不会加载它们。这与图像预加载相反。

      这是原始延迟加载插件的现代JavaScript 版本。它使用 Intersection Observer API 观察图像何时进入浏览器视口。

      原始代码的灵感来自 Matt Mlinac 的 YUI ImageLoader 实用程序。新版本大量借用了 Dean Hume 的博客文章。

      基本用法

      默认情况下,惰性加载假定可以在 data-src 属性中找到原始高分辨率图像的 URL 。您还可以在 src 属性中包括可选的低分辨率占位符。

      <script src="https://cdn.jsdelivr.net/npm/lazyload@2.0.0-rc.2/lazyload.js"></script>
      
      <img class="lazyload" data-src="img/example.jpg" width="765" height="574" />
      <img class="lazyload" src="img/example-thumb.jpg" data-src="img/example.jpg" width="765" height="574" />
      

      有了 HTML,您就可以使用工厂方法初始化插件了。如果您不传递任何设置或图像元素,它将使用 class 延迟加载所有图像 lazyload

      lazyload();
      

      如果愿意,可以将图像元素显式传递给工厂。例如,如果您使用其他类名,请使用此名称。

      let images = document.querySelectorAll(".branwdo");
      lazyload(images);
      

      如果愿意,还可以使用普通的旧构造函数。

      let images = document.querySelectorAll(".branwdo");
      new LazyLoad(images);
      

      可以通过传递附加参数来配置核心 IntersectionObserver

      new LazyLoad(images, {
           root: null,
           rootMargin: "0px",
           threshold: 0
      });
      

      附加 API

      要使用其他 API,您需要将插件实例分配给变量。

      let lazy = lazyload();
      

      要强制加载所有图像,请使用 loadimages().

      lazy->loadImages();
      

      要销毁插件并停止延迟加载,请使用 destroy().

      lazy->destroy();
      

      请注意, destroy() 这不会加载视口外图像。如果您还想加载图像,请使用loadAndDestroy()

      lazy->loadAndDestroy();
      

      jQuery 包装器不提供其他 API。

      jQuery Wrapper

      如果使用 jQuery,则有一个包装器,可以使用熟悉的旧语法。请注意,data-original 默认情况下要提供 BC 。这应该是该插件以前版本的替代品。

      <img class="lazyload" data-original="img/example.jpg" width="765" height="574">
      <img class="lazyload" src="img/example-thumb.jpg" data-original="img/example.jpg" width="765" height="574">
      
      $("img.lazyload").lazyload();
      

      方案

      图像模糊

      低分辨率占位符,即。“模糊”技术。您可以在 in this blog entry 中看到这一点。向下滚动以查看模糊的图像。

      <img class="lazyload"
           src="thumbnail.jpg"
           data-src="original.jpg"
           width="1024" height="768" />
      
      <div class="lazyload"
           style="background-image: url('thumbnail.jpg')"
           data-src="original.jpg" />
      

      响应式图像

      可通过延迟加载响应式图像 data-srcset。如果浏览器不支持 srcset 并且没有 polyfill,data-src 将显示来自的图像。

      <img class="lazyload"
           src="thumbnail.jpg"
           data-src="large.jpg"
           data-srcset="small.jpg 480w, medium.jpg 640w, large.jpg 1024w"
           width="1024" height="768" />
      
      <img class="lazyload"
           src="thumbnail.jpg"
           data-src="normal.jpg"
           data-srcset="normal.jpg 1x, retina.jpg 2x"
           width="1024" height="768" />
      

      内嵌占位符图像

      为了减少请求量,您可以使用数据 uri 图像作为占位符。

      <img src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs="
           data-src="original.jpg"
           width="1024" height="768" />
      

      安装

      这项工作仍在进行中。您可以使用 yarn 或 npm 安装 beta 版本。

      $ yarn add lazyload
      $ npm install lazyload
      

      License

      All code licensed under the MIT License. All images licensed under Creative Commons Attribution 3.0 Unported License. In other words you are basically free to do whatever you want. Just don’t remove my name from the source.

      Github

      https://github.com/tuupola/lazyload

      卖前端学习教程

      只需几十元,就能买到培训班的内部教程!开启高薪之路!

      零基础小白阿里P7的教程都有!

      同时长期收购所有培训班的前端教程

      目录
      目录