类似 Facebook 的内容占位符插件 - jQuery Skeleton Loader

类似 Facebook 的内容占位符插件 - jQuery Skeleton Loader

版本:

浏览量:1154

最后更新:2021-09-11

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

推荐指数:

详细信息

Skeleton Loader 是一个 jQuery 加载器插件,用于在通过 AJAX 请求加载页面内容时显示Facebook风格的动画内容占位符。

如何使用它:

1. 将 jQuery Skeleton Loader 插件加载到您的文档中,您就可以开始使用了。

<link href="jquery.skeleton.css" rel="stylesheet">
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery.scheletrone.js"></script>

2. 创建一个容器元素,如下所示:

<div class="demo" id="skeletone">
   
  ...
 
</div>

3. 初始化插件并定义要加载到文档中的外部数据源的路径。

var instance = $('#skeletone').scheletrone({
    url : "data.html"
});

4. 更多配置选项。

var instance = $('#skeletone').scheletrone({
 
    // if you have to pass data on querystring
    ajaxData: {},
 
    // debug options
    debug: {
        log: false,
        latency: 0
    },
 
    // mask an element's text, especially when incache is true
    maskText: false,
 
    // By default the main element of all text type nodes (nodetype = 3) is sketched (with background = #ccc).
    // If you want to avoid it, and in some cases it is necessary, just make the valure to false.
    skelParentText: true,
 
    // exclude the iframes of the page to be scanned (to avoid security issues)
    removeIframe: false,
 
    // contain background images
    backgroundImage: true,
 
    // To apply a css class to the images maked skeleton, typically to apply a placeholder.
    // In the attached css file a class, named ".bg-image" is already available where you can add the placeholder in a base64 format
    replaceImageWith: '',
 
    // save the template into local storage
    incache: false,
 
    // if you want to retrieve only a specific content from a loaded page use this option with a selector expression
    selector: false,
 
    // callback
    onComplete: function() {
      console.info('default onComplete() event');
    }
     
});

变更日志:

v1.2.0 (02-11-2021)

  • 添加了带有“选择器”选项的新功能,以填充来自 lodead 页面的特定内容 

  • 修复了 IE 和 remove() 方法的问题

v1.1.2 (02-10-2021)

  • IE 的 remove() polyfill

2018-10-15

  • 添加了停止装载机

2017-09-29

  • 选项 incache 改进

2017-09-28

  • 新选项 SkelParentText

2017-09-26

  • JS更新

 

联系我们
付费复制 免费复制 付费复制
付费后30天内不限量复制

价格:元

支付宝支付
联系客服
扫一扫,支付¥

正在加载二维码...

支付完成后,请等待10秒左右,请勿关闭此页

发表评论

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