zoukankan      html  css  js  c++  java
  • 分页/滑动加载、预加载

    目前正在进行一个视频网站的拷贝项目,流程为:
    1》从X视频网站取回:预览图链接、视频描述、视频下载链接存入本地数据库;
    2》本地查询数据库取出视频信息,通过php或者其他语言动态形成HTML页面;
    但是出现的问题有:
    1》未将预览图下载至本地,所以在页面远程载入图片阶段消耗了大量的时间,并且时常加载失败;
    2》由于视频条目较多,一次性取出显示将会使得页面相当庞大,搜索相当不便;
    鉴于以上问题,对应的解决方案设想如下:
    1.1》将图片取回本地,并将图片链接替换为本地链接;
    1.2》预加载图片(网速过慢的时候),在图片加载完成之前用本地图片暂时placeholder,并允许浏览器缓存,以后尽量从缓存中取回;
    2.1》分页,每一次只展示一版视频信息,通过底部导航来进行跳选;
    2.2》首次只显示一版,然后向下滑动的时候逐步显示;
    详细的实现方案如下:
    2.1》分页
    >php根据当前所在的页面https://website.com?index=i索引i,建立SQL语句:select * from tableName limit i*amount,amount;
    >底部的页面总数count根据数据库中的条目数/单页显示的数目决定,即count=sum/amount;
    2.2》延迟加载
    >首先将页面下方的元素display:none;然后判断用户当前的滚屏距离dy,将屏幕下方dy距离内涉及的元素设为display:block;
    >相关的函数库有:jquery.lazyload.js、
    1.1》urllib.request.urlretrieve()取回图片,并更改链接
    1.2》预加载(待细究)
    var img=new Image();
    img.src=[url];
    img.onload=callback;

  • 相关阅读:
    Linux_LEMP
    Linux_LEMP
    Linux_指令杂烩
    Linux_指令杂烩
    Linux_SELinux使用
    AWS S3存储基于Hadoop之上的一致性保证
    Ozone数据写入过程分析
    Ozone Datanode的分布式元数据管理
    聊聊Ozone的Topology Awareness
    Ozone数据探查服务Recon的启用
  • 原文地址:https://www.cnblogs.com/dlx1996/p/7182267.html
Copyright © 2011-2022 走看看