强大的图像预加载插件 - jQuery preload.js

版本:

浏览量:1550

最后更新：2021-09-12

应用标签：MAC 软件 git Jquery插件

推荐指数:

查看演示点击下载

详细信息

preload.js 是一个小巧而强大的 jQuery 插件，用于在将一系列大图像加载到 DOM 之前预加载它们。

该插件目前带有 4 种预加载模式，以满足您的特定设计需求：

链接：在文档中预加载图像链接。
URL：预加载您指定的图像路径数组。
翻转：查找和替换图像。
占位符：在加载图像之前显示占位符。

如何使用它：

1. 在 jQuery 库之后插入缩小版的 jQuery preload.js 插件，我们就可以开始了。

<script src="https://code.jquery.com/jquery-1.12.4.min.js"
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ"
        crossorigin="anonymous">
</script>
<script src="jquery.preload-min.js"></script>

2. 在特定容器内预加载图像链接（链接模式）。

<div id="example">
  <a href="1.jpg">Iamge link</a>
</div>

$.preload( '#images a' );
// or
$('#images a').preload();

3. 预加载一组图像。（网址模式）。

$.preload([ '1', '2', '3' ], {
  base:'/', // based url
  ext:'.jpg' //  file extension
});

4. 图像完全加载后翻转图像（翻转模式）。

$.preload( 'img', {
  find: '.jpg',
  replace: '_alt.jpg'
});
 
// or
 
$('img').preload({
  find: '.jpg',
  replace: '_alt.jpg'
});

5. 显示占位符，直到图像完全加载（占位符模式）。

{
  /* data:
    loaded: how many images were preloaded successfully.
    failed: how many images failed the preloading.
    next: 0-based index of the next image to preload.
    done: amount of preloaded images ( loaded + failed ).
    found: whether the last image could be preloaded or not.
    total: amount of images to preload overall.
    image: URL of the related image.
    original: The original source related to this image.
  */
 
  // callback called every time a new url is requested
  onRequest:function( data ){ // ... },
 
  // called every time a response is received(successful or not)
  onComplete:function( data ){ // ... },
 
  // called after all the images were loaded(or failed)
  onFinish:function( data ){ // ... }
 
}

联系我们