适用场景
1.提升用户体验,改善前端页面效果,采用全站动态不刷新页面的方式加载内容。
2.特别是移动端,刷新页面所产生的等待时间和展现方式严重影响网站整体的设计效果和使用体验。
3.正常的Ajax请求不会改变url,浏览器不会保存历史记录,前进和后退功能就不能使用。
以上,可以使用jQuery.address.js插件就可以实现最基本的全站Ajax动态加载页面内容。
插件特点
1.在浏览器或社交网站中添加书签
2.通过电子邮件或即时消息发送链接
3.使用主要搜索引擎查找特定内容
4.利用浏览器历史记录和重新加载按钮
5.实现全站链接Ajax加载页面内容,不刷新页面,不影响搜索引擎收录
(以上来自网络资料)
在项目中的使用
//引入所需要的js文件
<script src="js/jquery.address-1.6.min.js"></script>
<script type="text/javascript">
$(function() {
var newsPage = {
getProductListInner: function() {
//指定url前缀并初始化
$.address.state('/').init(function() {
//绑定所需要的链接
$('.news-nav .all').address();
}).change(function(event) {
//当url发生变化时的执行的事件
refreshProductList(event.value);
});
//通过Ajax获取新页面内容
function refreshProductList(href) {
//获取当前页面要替换的元素
var content1 = $('#news-section');
$.ajax({
type: "get",
url: href,
success: function(data) {
//找到返回值中的要替换元素
var new_content1 = $(data).find("#news-section");
content1.hide().html(new_content1.html()).stop().fadeIn();
//对于图片进行懒加载
$('.news-container .news-img img').lazyload({
threshold: 200,
effect: 'fadeIn'
})
$('.news-container .detail-img img').lazyload({
threshold: 200,
effect: 'fadeIn'
})
}
});
}
},
}
//调用
newsPage.getProductListInner()
})
</script>