在页面加载后加载图像 - jQuery Postify

版本:

浏览量:1163

最后更新：2021-09-12

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

推荐指数:

查看演示点击下载

详细信息

Postify jQuery 插件提供了一种优雅的方式来延迟加载图像，在加载网页的主要部分后加载特定图像。

当图像在文档中加载和呈现时，该插件为图像提供了 7 个内置的显示动画。

它还带有 5 个调整大小选项，可用于相对于彼此调整容器和图像大小。

如何使用它：

1. 链接到 jQuery 库和 Postify 插件的文件。

<script src="/path/to/jquery.min.js"></script>
<link rel="stylesheet" href="/path/to/postify.css" />
<script src="/path/to/jquery.postify.js"></script>

2. 使用data-postify属性将图像插入容器，如下所示：

<div class="postify example" data-postify="1.jpg"></div>
<div class="postify example" data-postify="2.jpg"></div>
<div class="postify example" data-postify="3.jpg"></div>
...

3. 使用默认选项初始化 Postify 插件：

$(function(){
  $('div.example').postify();
});

4. 设置您要使用的动画。所有可能的动画：

淡入淡出（默认）
向上滑动
滑下
向左滑动
向右滑动
翻动
规模
风俗

$('div.example').postify({
  "animation": "fade"
});

5. 当您覆盖该animation属性时，您可以通过提供一个包含至少两个对象和一个可选的数组来定义自定义动画function step(now, fx)。第一个对象描述开始，第二个包含最终状态。注意：您不能为复杂的非数字 css 属性设置动画。如果你想为transform属性设置动画，你必须用初始状态定义第一个对象，用可选的端点定义第二个对象。该step函数为每个框架手册设置css。

$('div.example').postify({
  "animation": [{opacity: 0}, {opacity: 0.5}]
});

6. 决定后加载的图像应该如何调整大小本身或包含元素的大小。

父级（默认）：调整父级的大小，使其与图像的大小相匹配。
覆盖：缩放图像，它填充父级。
childHeight：强制孩子由父母调整其高度。
childWidth：强制孩子通过父母调整其宽度。
自动：自动选择

$('div.example').postify({
  "adjustSize": "parent"
});

7. 自定义图片加载指示器。

$('div.example').postify({
  "showLoading": true,
  "loadingClass": "postify-loading",
  "loadingElements": "<div></div><div></div><div></div><div></div>"
});

8. 更多默认值的配置选项。

$('div.example').postify({
 
  // image url to load
  "url": undefined,
 
  // easing function
  "easing": "ease",
 
  // the duration of the animation
  "duration": "slow",
 
  // time to wait before loading the image
  "delay": 0,
 
  // load images in a certain order
  "priority": 0
   
});