jquery.pjax.js 应该怎么用？

Posted 2023-04-13

最近发现一个jquery.pjax.js，但是不知道怎么用，那位大神知道说一下，
这里有github的地址https://github.com/defunkt/jquery-pjax，有点看不懂，

//引入jquer.js和lazyload.js
<script type="text/javascript">
$(function()
$("img").lazyload(
effect : "fadeIn"
);
);
</script>

其中img是延迟加载所有图片，也可以根据不同模板作相应改动，比如我这个主题，可以改成#post img，这样只延迟加载#post 容器内的图片，否则可能影响到侧边图片的加载，主要是留言者头像可能会最后加载；

fadeIn是图片显示效果

这样基本就可以了！

如果上面的功能可能没有达到你的要求，还有几个选项可供设置。

可以设置阀值来控制 灵敏度

$(“img”).lazyload( threshold : 200 );

把阀值设置成200 意思就是当图片没有看到之前先load 200像素。当然了你也可以通过设置占位符图片和自定事件来触发加载图片事件

$("img").lazyload(
placeholder : "img/grey.gif",
event : "click"
);

还可以通过定义effect 参数来定义一些图片显示效果

$("img").lazyload(
placeholder : "img/grey.gif",
effect : "fadeIn"
);

事件触发加载，事件可以是任何 jQuery 时间, 如: click 和 mouseover. 你还可以使用自定义的事件, 如: sporty 和 foobar. 默认情况下处于等待状态, 直到用户滚动到窗口上图片所在位置. 在灰色占位图片被点击之前阻止加载图片, 你可以这样做:

$("img").lazyload(
placeholder : "img/grey.gif",
event : "click"
);

延迟加载图片，Lazy Load 插件的一个不完整的功能, 但是这也能用来实现图片的延迟加载. 下面的代码实现了页面加载完成后再加载. 页面加载完成 5 秒后, 指定区域内的图片会自动进行加载.

$(function()
$("img:below-the-fold").lazyload(
placeholder : "img/grey.gif",
event : "sporty"
);
);
$(window).bind("load", function()
var timeout = setTimeout(function() $("img").trigger("sporty"), 5000);
);

图片在容器里面你可以将插件用在可滚动容器的图片上, 例如带滚动条的 DIV 元素. 你要做的只是将容器定义为 jQuery 对象并作为参数传到初始化方法里面.

CSS

#container
height: 600px;
overflow: scroll;


JavaScript 代码:

$("img").lazyload(
placeholder : "img/grey.gif",
container: $("#container")
); 参考技术A //引入jquer.js和lazyload.js
<script type="text/javascript">
$(function()
$("img").lazyload(
effect : "fadeIn"
);
);
</script>

其中img是延迟加载所有图片，也可以根据不同模板作相应改动，比如我这个主题，可以改成#post img，这样只延迟加载#post 容器内的图片，否则可能影响到侧边图片的加载，主要是留言者头像可能会最后加载；

fadeIn是图片显示效果

这样基本就可以了！

如果上面的功能可能没有达到你的要求，还有几个选项可供设置。

可以设置阀值来控制 灵敏度

$(“img”).lazyload( threshold : 200 );

把阀值设置成200 意思就是当图片没有看到之前先load 200像素。当然了你也可以通过设置占位符图片和自定事件来触发加载图片事件

$("img").lazyload(
placeholder : "img/grey.gif",
event : "click"
);

还可以通过定义effect 参数来定义一些图片显示效果

$("img").lazyload(
placeholder : "img/grey.gif",
effect : "fadeIn"
);

事件触发加载，事件可以是任何 jQuery 时间, 如: click 和 mouseover. 你还可以使用自定义的事件, 如: sporty 和 foobar. 默认情况下处于等待状态, 直到用户滚动到窗口上图片所在位置. 在灰色占位图片被点击之前阻止加载图片, 你可以这样做:

$("img").lazyload(
placeholder : "img/grey.gif",
event : "click"
);

延迟加载图片，Lazy Load 插件的一个不完整的功能, 但是这也能用来实现图片的延迟加载. 下面的代码实现了页面加载完成后再加载. 页面加载完成 5 秒后, 指定区域内的图片会自动进行加载.

$(function()
$("img:below-the-fold").lazyload(
placeholder : "img/grey.gif",
event : "sporty"
);
);
$(window).bind("load", function()
var timeout = setTimeout(function() $("img").trigger("sporty"), 5000);
);

图片在容器里面你可以将插件用在可滚动容器的图片上, 例如带滚动条的 DIV 元素. 你要做的只是将容器定义为 jQuery 对象并作为参数传到初始化方法里面.

CSS

#container
height: 600px;
overflow: scroll;


JavaScript 代码:

$("img").lazyload(
placeholder : "img/grey.gif",
container: $("#container")
);追问

很高兴看到的答复，
可是我们的是一个吗！！
我要问的是jquery.pjax 这个东西的，你回答的是 lazyload 延迟加载啊

参考技术B //引入jquer.js和lazyload.js
<script type="text/javascript">
$(function()
$("img").lazyload(
effect : "fadeIn"
);
);
</script>

其中img是延迟加载所有图片，也可以根据不同模板作相应改动，比如我这个主题，可以改成#post img，这样只延迟加载#post 容器内的图片，否则可能影响到侧边图片的加载，主要是留言者头像可能会最后加载；

fadeIn是图片显示效果

这样基本就可以了！

如果上面的功能可能没有达到你的要求，还有几个选项可供设置。

可以设置阀值来控制 灵敏度

$(“img”).lazyload( threshold : 200 );

把阀值设置成200 意思就是当图片没有看到之前先load 200像素。当然了你也可以通过设置占位符图片和自定事件来触发加载图片事件

$("img").lazyload(
placeholder : "img/grey.gif",
event : "click"
);

还可以通过定义effect 参数来定义一些图片显示效果

$("img").lazyload(
placeholder : "img/grey.gif",
effect : "fadeIn"
);

事件触发加载，事件可以是任何 jQuery 时间, 如: click 和 mouseover. 你还可以使用自定义的事件, 如: sporty 和 foobar. 默认情况下处于等待状态, 直到用户滚动到窗口上图片所在位置. 在灰色占位图片被点击之前阻止加载图片, 你可以这样做:

$("img").lazyload(
placeholder : "img/grey.gif",
event : "click"
);

延迟加载图片，Lazy Load 插件的一个不完整的功能, 但是这也能用来实现图片的延迟加载. 下面的代码实现了页面加载完成后再加载. 页面加载完成 5 秒后, 指定区域内的图片会自动进行加载.

$(function()
$("img:below-the-fold").lazyload(
placeholder : "img/grey.gif",
event : "sporty"
);
);
$(window).bind("load", function()
var timeout = setTimeout(function() $("img").trigger("sporty"), 5000);
);

图片在容器里面你可以将插件用在可滚动容器的图片上, 例如带滚动条的 DIV 元素. 你要做的只是将容器定义为 jQuery 对象并作为参数传到初始化方法里面.

CSS

#container
height: 600px;
overflow: scroll;


JavaScript 代码:

$("img").lazyload(
placeholder : "img/grey.gif",
container: $("#container")
); 参考技术C 这里（http://www.uedsc.com/jquery-pjax-js.html）有翻译文档，你可以看看，话说这个网站也是用到了这个技术，只是为实现具体功能，不知道什么原因。

pjax简单实例

ajax缺点是破坏了浏览器的前进后退，因为ajax的请求不会留在历史记录中。pjax就不一样了，pjax被解释成ajax+pushState的封装，因为它把ajax的请求写入历史记录，并反映在地址栏，这样用户就能愉快地使用前进后退了。pjax有好几个实现方法，这里使用最常用的Jquery库，使用jquery.pjax.js。演示代码的服务器端使用PHP脚本语言。

　　Pjax用在那儿？就说百度云盘吧，这个大家肯定都用过。百度云盘PC端，在点击打开某个文件夹后会打开这个文件夹下的文件，其实显示文件的这个div就用到了pjax技术。地址栏变换，内容更换，但是却是一个ajax请求。等到后退的时候，不必重新请求上一层文件夹的内容，因为是存在在历史记录中的。而且，开发者还可以选择时候使用cache和storage缓存。

DEMO1：

客户端：

<!DOCTYPE html>
<html>
<head>
  <title>pjax</title>
    <meta charset="utf-8">
</head>
<body>
  <h1>My Site</h1>
  <div>
    Go to <a href="res1.php">第一页</a>.<a href="res2.php">第二页</a>
  </div>
  <div id="container"></div>    
</body>
<script src="../jquery-2.1.4.min.js"></script>
<script src="../jquery.pjax.js"></script>
<script type="text/javascript">
$(document).pjax(‘a‘, ‘#container‘)
</script>
</html>

服务器端：

res1.php

<?php 
echo "<div style=‘background:red;‘>第一页</div>";

res2.php

<?php 
echo "<div style=‘background:red;‘>第二页</div>";

解释：$(document).pjax(‘a‘, ‘#container‘)其中a是触发元素，#container是装载pjax返回内容的容器，下面也是这样。

DEMO2：

客户端：

<!DOCTYPE html>
<html>
<head>
  <title>pjax</title>
    <meta charset="utf-8">
</head>
<body>
  <h1>My Site</h1>
  <div>
    <input type="button" id="clickMe" value="GO">
  </div>
  <div id="container"></div>    
</body>
<script src="../jquery-2.1.4.min.js"></script>
<script src="../jquery.pjax.js"></script>
<script type="text/javascript">
$(function(){
    $(‘#clickMe‘).click(function(){
        $.pjax({
            url: ‘./res3.php‘,
            container: ‘#container‘
        });
    });
});
</script>
</html>

服务器端代码：

res3.php:

<?php 
echo "<div style=‘background:red;‘>第三页</div>";