Echo懒加载

1、首先下载echo.js和blank.gif和loading.gif2、然后在页面中引入echo插件:
2、JS代码



3、书写html主体内容:


            ![](blank.gif)
            ![](blank.gif)
            ![](blank.gif)
            ![](blank.gif)
            ![](blank.gif)

4、完整Demo:



    
        
        
    
    
            ![](blank.gif)
            ![](blank.gif)
            ![](blank.gif)
            ![](blank.gif)
            ![](blank.gif)
    
    
    

5、大概意思:

将src换成默认的blank空白图片,将data-echo属性值换成真实的图片路径。这样既可达到懒加载的效果,可以通过F12的NETWORK查看,他每次都会随着滚动条往下滑而加载图片,不会一打开页面就加载全部。当他加载到某个图片的时候会发现图片的data-echo属性会消息,而src会变成真实的图片路径,也符合语法。

若有兴趣,欢迎来加入群,【Java初学者学习交流群】:458430385,此群有Java开发人员、UI设计人员和前端工程师。有问必答,共同探讨学习,一起进步!
欢迎关注我的微信公众号【Java码农社区】,会定时推送各种干货:


qrcode_for_gh_577b64e73701_258.jpg

你可能感兴趣的:(Echo懒加载)