分页/滑动加载、预加载

目前正在进行一个视频网站的拷贝项目，流程为：
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;