功能丰富 高性能图像加载插件 jQuery loadimage.js

  • 源码大小:21.09KB
  • 所需积分:1积分
  • 源码编号:19JP-3186
  • 浏览次数:879次
  • 最后更新:2023年05月15日
  • 所属栏目:加载
我要下载
加入收藏
本站默认解压密码:19jp.com 或 19jp_com

简介

loadimage.js是一个jQuery插件,有助于增强网站的图像加载和浏览体验。

它只允许并行加载一定数量的图像,从而提供流畅高效的图像加载体验。通过这种方式,首先加载靠近页面顶部的图像,确保用户拥有快速响应的体验。未立即加载的图像将在队列中等待,并在其他图像完成加载后立即加载。

此外,该插件还提供了其他一些有用的功能,可以增强图像浏览体验,例如点击时在模式弹出窗口中显示大图像的能力、加载图像时显示的加载微调器、加载图像失败时显示的X图标等等。

如何使用它:

1.下载并导入loadimage插件的文件。

  1. <!-- jQuery Is Required -->
  2. <script src="/path/to/cdn/jquery.min.js"></script>
  3.  
  4. <!-- jQuery loadimage.js plugin -->
  5. <link href="./dist/css/loadimage.css" rel="stylesheet" />
  6. <script src="./dist/js/loadimage.js"></script>

2.限制可以同时获取的图像数量。多余的图像将被放置在先进先出队列中。默认值:4。

  1. $.fn.loadimageConfig({
  2. processLimit: 2
  3. });

3.初始化图像上的插件。请注意,您必须使用DIV元素嵌入图像,而不是<img />.

  1. <div class="example">
  2. <div src="1.jpg"></div>
  3. <div src="2.jpg"></div>
  4. <div src="3.jpg" href="3-large.jpg">With Image Lightbox</div>
  5. ...
  6. </div>
  1. $(function(){
  2. $('.example div').loadimage();
  3. });

4.将额外的CSS类应用于图像。

  1. $('.example div').loadimage({
  2. transition: 'opacity 10s',
  3. width:"100px",
  4. height:"66px",
  5. border: 'solid gray 1px',
  6. // more CSS properties here
  7. });

预览截图