客户端实现图片滑动加载,资讯详情页面
2017-03-02 23:44
274 查看
展示方案:客户端请求资讯详情数据接口获取 富文本数据 客户端使用WebView展示。
当文章详情篇幅长、包含图片多一次性加载全部图片会造成客户端短暂的卡顿 影响用户体验 所以考虑计划做图片滑动加载 默认使用统一的占位图。
本以为使用一个前端jquery插件(jquery.lazyload.js)就可以解决,应用这个插件后,出现问题所有图片还是一次性加载完成,不是滑动加载,分析发现是因为客户端在实现webview的时候要定义页面中的标题、评论、相关文章等不能够给设置webview的高度为固定手机屏幕高度,所以jquery.lazyload.js的实现思路就不再适用。
最终的解决方法是和客户端交互,通过客户端监测整个webview滑动的高度 把检测的高度值传递给前端js,然后前端js根据传递的滑动高度 计算那些图片在可视区内 控制显示。
前端代码如下:
需要约定好接口返回的富文本的自定义属性data-original为原图地址,src指定为占位图。
然后就是就是针对android、ios客户端实现跟前端js交互,调用js方法scrollevent 具体方法可百度。
每日一图
当文章详情篇幅长、包含图片多一次性加载全部图片会造成客户端短暂的卡顿 影响用户体验 所以考虑计划做图片滑动加载 默认使用统一的占位图。
本以为使用一个前端jquery插件(jquery.lazyload.js)就可以解决,应用这个插件后,出现问题所有图片还是一次性加载完成,不是滑动加载,分析发现是因为客户端在实现webview的时候要定义页面中的标题、评论、相关文章等不能够给设置webview的高度为固定手机屏幕高度,所以jquery.lazyload.js的实现思路就不再适用。
最终的解决方法是和客户端交互,通过客户端监测整个webview滑动的高度 把检测的高度值传递给前端js,然后前端js根据传递的滑动高度 计算那些图片在可视区内 控制显示。
前端代码如下:
var elements; function scrollevent(top) { if (elements == null || elements == undefined||elements.length == 0) { return; } elements = $.grep(elements, function (v) { var $this = $(v); var load = $this.attr("load"); if (load==undefined) { return true; } }); elements = $(elements); var count = 0; elements.each(function () { count++; var $this = $(this); var load = $this.attr("load"); if (load == undefined) { if (parseInt(top) > $this.offset().top) { var src = $this.attr("data-original"); if (src == null || src == undefined) { } else { $this.attr("src", src); $this.attr("load", 1); } } } }); //$("#dialog div").html(top+'px').parent().show(); } $(document).ready(function () { var dialog = "<div style='width:100%;height:100%;left:0;top:0;position:fixed;display:none;' id='dialog'><div style='background-color:rgba(0,0,0,0.8);color:white;font-size:16px;position:fixed;width:260px;text-align:center;border-radius:6px;z-index:1;top:0px;left:50%;margin-left:-130px;'>sdfasdfasdf</div></div>"; $('body').append(dialog); elements = $("img"); });
需要约定好接口返回的富文本的自定义属性data-original为原图地址,src指定为占位图。
然后就是就是针对android、ios客户端实现跟前端js交互,调用js方法scrollevent 具体方法可百度。
每日一图
相关文章推荐
- 实现淘宝商品详情页面的viewPager滑动到最后一张图片跳转的功能
- [置顶] viewPager+photoView实现网络图片加载左右滑动+手势缩放功能+滑动到下一页其他页面恢复默认大小
- JavaScript实现 页面滚动图片加载
- Android腾讯微博客户端开发5:利用FootView实现ListView滑动动态加载实现分页
- 解决ListView滑动时卡的问题,实现异步加载图片解决
- jQuery页面滚动图片等元素动态加载实现
- 解决ListView滑动时卡的问题,实现异步加载图片解决 .
- JavaScript实现页面滚动图片加载(仿lazyload效果)
- jQuery页面滚动图片等元素动态加载实现
- Ajax 实现静态刷新页面 带加载旋转图片
- JS+AS实现真正页面加载图片进度条(带百分比)
- Android SQLite PhoneGap sencha touch 中调用Java原生程序,数据加载到页面,并实现滑动分页
- jQuery页面滚动图片等元素动态加载实现
- Ajax实现静态刷新页面过程带加载旋转图片
- 一段实现页面上的图片延时加载的js代码
- Android腾讯微博客户端开发5:利用FootView实现ListView滑动动态加载实现分页
- Android腾讯微博客户端开发5:利用FootView实现ListView滑动动态加载实现分页
- 页面滚动图片等元素动态加载实现本质
- 原生Js页面滚动延迟加载图片实现原理及过程
- Android_开发 Gallery实现异步加载网络图片 并只加载当前停止页面图