优雅的图像延迟加载器和灯箱插件 - jQuery GazeImg

优雅的图像延迟加载器和灯箱插件 - jQuery GazeImg

版本:

浏览量:75

最后更新:2021-09-11

应用标签:Jquery插件MAC 软件

推荐指数:

详细信息

GazeImg 是一个轻量级、优雅、功能齐全的图像延迟加载器和灯箱插件,用于改善网页上的页面加载和图像查看体验。

主要特点:

  • 仅当图像出现在视口中时才加载图像。

  • 不要加载缓存的图像。

  • 图片加载错误反馈。

  • 显示自定义占位符,直到加载原始图像。 

  • 允许您在灯箱弹出窗口中查看图像

如何使用它:

1. 将 jQuery JavaScript 库和 jQuery GazeImg 插件文件插入 HTML 文档。

<link rel="stylesheet" href="/path/to/lib/css/gazeimg.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/lib/js/gazeimg.js"></script

2. 使用data-gisrc属性指定目标图像的路径

<img data-gisrc="image-to-lazy-load.jpg" />

3. 要将灯箱应用于图像,只需将data-gazeimg属性添加img标签,插件将处理其余的工作。

<img data-gisrc="image-to-lazy-load.jpg" data-gazeimg />

4. 加载原始图像时显示占位符图像。

<img src="placeholder.gif"
     data-gisrc="image-to-lazy-load.jpg"
     data-gazeimg
     />

5. 当通过 AJAX 或 PJAX 将新图像加载到文档中时重新初始化插件。

<img src="placeholder.gif"
     data-gisrc="image-to-lazy-load.jpg"
     data-gazeimg
     />

发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。