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

版本:

浏览量:1246

最后更新：2021-09-11

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

推荐指数:

查看演示点击下载

详细信息

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');
    }
     
});