AI智能
改变未来

css3 懒加载简易使用 提升网页加载效率

效果图为

代码为:

[code]<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><title>2020.07.09</title></head><style>body{margin: 0;background-color: #434343;}.wrap{overflow: hidden;width: 810px;background-color: #2D2D2D;margin: 50px auto;}.wrap img{display: block;border: 2px solid #4F4F4F;float: left;border-radius: 10px;}</style><body><div class=\"wrap\"><img src=\"images/1.jpg\" height=\"181\" width=\"198\" alt=\"林允儿\"><img src=\"images/2.jpg\" height=\"181\" width=\"198\" alt=\"林允儿\"><img src=\"images/3.jpg\" height=\"181\" width=\"198\" alt=\"林允儿\"><img src=\"images/4.jpg\" height=\"181\" width=\"198\" alt=\"林允儿\"><img src=\"images/5.jpg\" height=\"181\" width=\"198\" alt=\"林允儿\"><img src=\"images/6.jpg\" height=\"181\" width=\"198\" alt=\"林允儿\"><img src=\"images/7.jpg\" height=\"181\" width=\"198\" alt=\"林允儿\"><img src=\"images/8.jpg\" height=\"181\" width=\"198\" alt=\"林允儿\"><img src=\"images/9.jpg\" height=\"181\" width=\"198\" alt=\"林允儿\"><img src=\"images/10.jpg\" height=\"181\" width=\"198\" alt=\"林允儿\"><img src=\"images/11.jpg\" height=\"181\" width=\"198\" alt=\"林允儿\"><img src=\"images/12.jpg\" height=\"181\" width=\"198\" alt=\"林允儿\"><img src=\"images/13.jpg\" height=\"181\" width=\"198\" alt=\"林允儿\"><img src=\"images/14.jpg\" height=\"181\" width=\"198\" alt=\"林允儿\"><img src=\"images/15.jpg\" height=\"181\" width=\"198\" alt=\"林允儿\"><img src=\"images/16.jpg\" height=\"181\" width=\"198\" alt=\"林允儿\"><img src=\"images/17.jpg\" height=\"181\" width=\"198\" alt=\"林允儿\"><img src=\"images/18.jpg\" height=\"181\" width=\"198\" alt=\"林允儿\"><img src=\"images/19.jpg\" height=\"181\" width=\"198\" alt=\"林允儿\"><img src=\"images/20.jpg\" height=\"181\" width=\"198\" alt=\"林允儿\"><img src=\"images/21.jpg\" height=\"181\" width=\"198\" alt=\"林允儿\"><img src=\"images/22.jpg\" height=\"181\" width=\"198\" alt=\"林允儿\"><img src=\"images/23.jpg\" height=\"181\" width=\"198\" alt=\"林允儿\"><img src=\"images/24.jpg\" height=\"181\" width=\"198\" alt=\"林允儿\"><script src=\"js/lazyload.js\"></script><script src=\"js/1.11.1/jquery.js\"></script><script>$(\"img\").lazyload({placeholder : \"images/2.gif\", //用图片提前占位// placeholder,值为某一图片路径.此图片用来占据将要加载的图片的位置,待图片加载时,占位图则会隐藏effect: \"fadeIn\", // 载入使用何种效果// effect(特效),值有show(直接显示),fadeIn(淡入),slideDown(下拉)等,常用fadeInthreshold: -200, // 提前开始加载// threshold,值为数字,代表页面高度.如设置为200,表示滚动条在离目标位置还有200的高度时就开始加载图片,可以做到不让用户察觉});</script></div></body></html>

js文件大家可以去cdn找 是可以找到的.

赞(0) 打赏
未经允许不得转载:爱站程序员基地 » css3 懒加载简易使用 提升网页加载效率