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

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

版本:

浏览量:64

最后更新:2021-09-12

应用标签:Jquery插件MAC 软件

推荐指数:

详细信息

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 ){ // ... }
 
}

发表评论

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