详细信息
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
/>
发表评论
◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。