jq判断iframe是否加载完

需要的效果如下:
原文链接 原文链接
贴吧类型的主页面,希望点击下面的帖子就可以看到帖子详情页,然后点击帖子上的返回按钮可以返回到点前浏览的地方。

主页面如下:
s.jf3q.com
问题:帖子列表是ajax请求,一次性加载10条数据,采用超链接跳转详情页之后,再返回主页面,主页面的帖子列表需要重新请求,如果说用户已经看到第五页的帖子,点击详情,再次返回主页面时,帖子只会请求显示第一页数据,这样用户需要在再加载4次数据才能找到自己浏览的那个位置,用户体验太差了。

寻找解决方法用iframe。实现效果如下:点击帖子链接,页面出现菊花,表示在请求详情页的数据
s.jf3q.com
数据加载完后,菊花隐藏,显示帖子详情,效果如下

s.jf3q.com
点击详情页的返回按钮,主页面的所有数据均在,并且显示在用户刚浏览的那条数据的位置。

关键性代码如下:
$("#detail iframe").load(function() {
//加载完隐藏转动菊花的操作
});

主要思路:
其实代码并不难,关键是思路。 主页面的显示和隐藏,以及用到了锚点链接。

第一步,主页面和详情页功能已完成

第二步:分别将主页代码和iframe用section标签包裹起来
s.jf3q.com
第三步,给帖子列表添加点击事件
教你写技术
ps,需要和自己定义的参数一样
s.jf3q.com教你写技术
这样,点击帖子列表就会显示菊花,加载完后显示详情页
第四步,返回主页操作
s.jf3q.com
这个用起来很简单,但是需要思路清晰,用jq来控制页面元素的显示和隐藏,如果问题没有得到解决,可以加我扣扣1913284695 ,当然还有其他的方法,比如get请求也可以实现

发布了140 篇原创文章 · 获赞 70 · 访问量 32万+

猜你喜欢

转载自blog.csdn.net/qq_21119773/article/details/100638570