图片懒加载 滚动加载 点击图片预览实现过程

作者是个前端菜鸟,只能靠着东拼西凑才能生存下来这样子

上次写了一个实现搜索框自动补全的小功能的文章,今天这个在其基础上,加入了几个新功能,两者卡可以结合使用,也可以分开独自使用,没有影响的,想了解的同学,可以先去了解一下,[传送门],下面开始实现标题的功能

1. 准备阶段

• WEUI: WEUI是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和小程序量身定制,令用户感知更加统一,点击进行在线体验.

• Jquery WEUI:JQuery WeUI 是专为微信公众账号开发而设计的一个简洁而强大的UI库，包含全部WeUI官方的CSS组件，并且额外提供了大量的拓展组件，丰富的组件库可以极大减少前端开发时间,JQuery WeUI官网.

• ECHO JS:ECHO JS 是一个纯javascript轻量级延迟加载插件,用来实现懒加载部分

2. 实现思路

• 监听键盘:监听键盘的搜索动作(也就是Enter键), 接收到后台的数据后,循环append到img容器中,这里使用的是WEUI的九宫格,将三列调成了两列,将图片展示出来

• 点击预览 监听用户的鼠标点击动作,当用户点击某一张图片时,调用Photo Browser,并使用pb.open();打开预览图

• 懒加载 将需要懒加载的img标签添加data-echo属性,并且将原src改为一张透明的loading gif图,echojs就会自动实现懒加载了,使用起来非常简单

• 滚动加载 滚动加载使用的是JQuery WEUI的infinite,当滑动到最下面时,触发加载动作,向后台发起ajax请求,同时记录当前页数

3. 不多B,上代码

    
    
    
    
    
    
    


    
    
    
    
    
    
    



    

        

            

                

                    
                    
                    
                
                
                    
                    搜索
                
            
            取消
        
    
    

    

        
        正在加载