zoukankan      html  css  js  c++  java
  • 客户端实现图片滑动加载,资讯详情页面

    展示方案:客户端请求资讯详情数据接口获取 富文本数据 客户端使用WebView展示。

    当文章详情篇幅长、包含图片多一次性加载全部图片会造成客户端短暂的卡顿 影响用户体验 所以考虑计划做图片滑动加载 默认使用统一的占位图。

    本以为使用一个前端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='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;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  具体方法可百度。

    每日一图

  • 相关阅读:
    centos7的网络设置
    day1学习
    举例讲解Linux系统下Python调用系统Shell的方法
    Python引用模块和查找模块路径
    详解Python中的循环语句的用法
    [cf1566H]Xorquiz
    [luogu5180]支配树
    [atAGC055D]ABC Ultimatum
    [cf1552H]A Serious Referee
    [gym102538H]Horrible Cycles
  • 原文地址:https://www.cnblogs.com/kongkonglonglong/p/6493227.html
Copyright © 2011-2022 走看看