欢迎访问 夜阑小雨 我的学习碎片档案,这里记录了我的学习内容和工作中经验,希望给您带去帮助。

动态加载文章内容

javascript 夜阑小雨 822℃ 0评论

所谓的动态加载文章内容就是像 NeoEase 首页一样, 在点击展开按钮之后, 才去加载相应的文章. 其实这个效果是模仿 163 UED Team 的, 我没看过他们的 JavaScript 代码, 可能实现方法不一样, 但是原理应该是相似的. 下面我会就其优缺点和设计思路, 和实现方法说说我的理解.

为什么要动态加载文章?

1. 快速向访客展示页面
文章很容是包含大量文字和多媒体资源 (如: 图片, 视频, 音乐), 加载这些内容需要占用很多的时间. 如果你的页面上存在大量文章, 当访客发现页面久久没有加载完成就感到不耐烦. 这是动态加载文章的主要目的.

2. 让文章列表化
使页面上的文章成为一个列表, 减少页面的空间占用, 访客可以方便的移动到页面下方, 提高旧文章被点击的几率. 并且你可以在页面上放置更多的文章而不用担心页面过长.

为什么不动态加载文章?

1. 对搜索引擎不友好
搜索引擎优化的目的是将有价值的东西尽量多的向搜索爬虫展示, 包括最新的文章内容. 只有标题的文章让爬虫只知道这个文章而不知其文章侧重, 使用 JavaScript 输出的文章内容未必可以被抓取和分析. 这些对 SEO 来说都是不好的.

2. 增加了请求次数
虽然将文章折叠起来, 我们一般还是会想办法向访客显示前面的几篇文章. 这样对用户是友好的, 但是要增加请求的次数和数据库访问的次数.

3. 一些插件失效
因为需要自定义方法抓取文章, 如果不添加特殊处理, 很可能令部分 WordPress 插件失效.

动态加载文章的设计思路

1. 找到页面上所有文章
为每个文章添加一个展开/折叠按钮

2. 向文章添加展开/折叠按钮
点击按钮, 如果文章内容没有加载, 加载并展开文章内容.
点击按钮, 如果文章内容已经加载, 则展开/折叠文章内容.

3. 加载文章内容
将文章的 id 发往后台, 在数据库中找到相应的文章内容并进行格式化, 返回响应显示在页面上.

JavaScript 处理代码分析

1. 找到页面上所有文章

1234567891011 // 在文档加载完毕的时候遍历所有匹配文章的元素jQuery(document).ready(function(){ jQuery(‘div.post’).each(function() { // 如果元素相应位置是文章 ID var id = jQuery(this).attr(‘id’); if(/^post\-[0-9]+$/.test(id)) { // 则为每个文章添加一个展开/折叠按钮 … } });});

2. 向文章添加展开/折叠按钮

123456789101112131415 toggle.toggle(function() { // 展开 // 如果文章内容为空, 加载文章内容 if(jQuery(‘#’ + id + ‘ .content’).text() == ”) { … } // 显示文章内容, 并切换按钮样式 jQuery(‘#’ + id + ‘ .content’).slideDown(); jQuery(this).removeClass(‘collapse’).addClass(‘expand’);},function() { // 折叠 // 隐藏文章内容, 并切换按钮样式 jQuery(‘#’ + id + ‘ .content’).slideUp(); jQuery(this).removeClass(‘expand’).addClass(‘collapse’);// 将按钮追加到文章标题前方}).prependTo(jQuery(‘#’ + id + ‘ h2’));

3. 加载文章内容

12345678910111213141516 // 取得文章 IDvar postId = id.slice(5);// 使用 AJAX 获取并处理文章内容jQuery.ajax({ type: ‘GET’ ,url: ‘?action=load_post&id=’ + postId ,cache: false ,dataType: ‘html’ ,contentType: ‘application/json; charset=utf-8’ // 取得返回内容之前显示加载信息 ,beforeSend: function(data){loadPostContent(id, ‘<p class=”ajax-loader”>Loading…</p>’);} // 获取文章内容成功, 更新文章内容 ,success: function(data){loadPostContent(id, data);} // 获取文章内容失败, 显示出错提示 ,error: function(data){loadPostContent(id, ‘<p>Oops, failed to load data.</p>’);}}); 后台代码处理

这个功能的难点是前台的 JavaScript 处理, 以 ID 获取文章内容的代码可以参考 wp-includes/post-template.php 的 get_the_content 方法.

转载请注明:夜阑小雨 » 动态加载文章内容

喜欢 (0)or分享 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址