高效且可定制的 jQuery 图像预加载插件 - Kyco Preloader

高效且可定制的 jQuery 图像预加载插件 - Kyco Preloader

版本:

浏览量:1192

最后更新:2021-09-12

应用标签:gitJquery插件MAC 软件

推荐指数:

详细信息

Kyco Preloader 是一个高效且可定制的 jQuery 图像预加载器插件,它允许使用进度条和加载文本预加载您的图像。

特征:

  • 带百分比显示的动画进度条。

  • 支持预加载本地图片、CSS 背景和跨域资源。

  • 支持按顺序预加载图像。

  • 自定义加载短信。

  • 支持进度动画和预加载淡出动画。

基本用法:

1. 在文档中包含最新版本的 jQuery 库。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

2. 在文档中包含 jQuery Kyco Preloader 插件的 javascript 和 CSS。

<script src="jquery.kyco.preloader.min.js"></script>
<link rel="stylesheet" href="jquery.kyco.preloader.css">

3. 将图像包装在要预加载图像的容器中。

<div class="demo">
<img src="images/01.jpg">
<img src="images/02.jpg">
<img src="images/03.jpg">
...
</div>

4. 通过调用您创建的容器上的插件来启用图像预加载器。

<script>
$(document).ready(function() {
$('.demo').kycoPreload();
});
</script>

5. 选项和默认值。

preloadSelector: true,
// if set to true will preload the selector's background image, note that the image
// will show as soon as it is loaded and not only once the preloader is done loading
truePercentage: true,
// NOTE: does not work with cross-domain calls
// if set to true will get the actual (compressed) file size of all the images instead of
// just looking at the number of images loaded divided by the total number of images
disableOverlay: false,
// if set to true will not create the blocking overlay
showInContainer: false,
// if set to true will load the preloader inside the selector element instead of
// across the whole page
hideBackground: false,
// NOTE: hideBackground is an option for when showInContainer is set to true
// if set to true will hide the css background-image of the selector element
hideNonImageElements: false,
// if set to true will hide all elements of the selector, not only the images
progressiveReveal: false,
// NOTE: if hideNonImageElements is set to true then progessiveReveal might not
// return the expected result because the image element's parent might be hidden
// if set to true will show images as soon as they are preloaded
forceSequentialLoad: false,
// Will force images to load in the order they appear in the DOM, this can potentially
// increase the load time because images won't start loading in parallel
silentMode: false,
// if set to true will hide the preloader
debugMode: false,
// if set to true will show errors
useOpacity: false,
// if set to true will use opacity property to hide elements instead of display property
hidePercentage: false,
// if set to true will not show the percentage numbers while loading
loaderText: 'loading images, please wait...',
// set the text of the loading message
animateDuration: 0,
// set the duration in milliseconds for each progress animation
fadeOutDuration: 100,
// set the duration in milliseconds for the preloader fadeout animation
showImagesBeforeComplete: true,
// if set to false will wait for the animation of the preloader fadeout to complete
// before showing the images
afterEach: function() {},
// called once after every image load
beforeComplete: function() {},
// called once after all images have been loaded and before the fadeout animation of the
// preloader triggers
onComplete: function() {}
// called once after all images have been loaded and all preloader animations have completed

变更日志:

2018-11-05

  • 截至日期是与最新的jQuery兼容。

2014-09-02

  • 添加动态涓流,即越接近实际值,优雅地减慢加载器动画。

联系我们
免费复制
微信扫码关注领取验证码
注:需在公众号回复"验证码
输入验证码后可免费复制
付费复制 免费复制 付费复制
付费后30天内不限量复制

价格:元

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

正在加载二维码...

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

发表评论

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