图片懒加载

amuqiao 发布于2019-08-29 16:28 / 2498人阅读

摘要：图片懒加载部分内容请看以下代码呈现正如以上呈现的部分相比较为简单主要是个组成，特别注意的有个属性后文会着重强调部分此部分内容用到部分的内容所以看不懂得小伙伴们可以先普及下的知识网页的全局样式解决兼容问题宋

图片懒加载

HTML部分：

内容请看以下代码呈现：

正如以上呈现的HTML部分相比较为简单主要是个UL li 组成，特别注意的有个data-src属性后文会着重强调

css部分

此部分内容用到部分H5的内容所以看不懂得小伙伴们可以先普及下H5的知识

/*网页的全局样式 解决兼容问题*/
body,div,p,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,table,tr,td,form,input,select,textarea,span,img,a,em,strong,*{ margin:0; padding:0;}
body{ font-family:"宋体"; font-size:12px; color:#000000;}
ul,ol,li{ list-style:none;}
h1,h2,h3,h4,h5,h6{ font-size:14px;}
input,select,textarea{ vertical-align:middle;}
img{ border:none; vertical-align:middle;}
a{ text-decoration:none; color:#333333;}
a:hover{ color:#009999;}
.clear{ clear:both; height:0px; width:0px; overflow:hidden;}


ul{
            overflow:hidden;
            width:800px;
            margin:0 auto;
        }
        li{
            width:50%;
            height:7rem;
            border:1px solid #ccc;
            box-sizing:border-box;
            float: left;
            overflow: hidden;
            position: relative;
        }
        li i{
            width:20px;
            height:20px;
            border-radius: 20px;
            position: absolute;
            border:2px solid #21d658;
            z-index: 0;
            left: 50%;
            top:50%;
            margin-top:-11px;
            margin-left: -11px;
            animation: move 1s infinite;
        }
        li i:before{
            position: absolute;
            width:5px;
            height:5px;
            border-radius: 4px;
            content: "";
            box-shadow: 0 0 10px #666;
            background: #fff;
            border:1px solid #fff;
            top:-3px; 
            left:50%;
            margin-left: -3px;
        }
        img{
            vertical-align:middle;
            border-width:0;
            width:100%;
            position: relative;
            z-index: 1;
        }
        @keyframes move{
            0%{
                transform:rotateZ(0);
            }
            100%{
                transform:rotateZ(360deg);
            }
        }

代码呈现部分我用到了CONMON.css如果不晓得的话，我也有一个公司的标准，具体在本人页面浏览注意

JS部分

此部分为关键部分特别地方以加有注释

希望各位脚本伙伴们能够一起努力！！

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/113771.html

图片的预加载和懒加载

摘要：图片的预加载是提升用户体验而损失性能的一种做法，而懒加载的性能就比较好了，所以将两个结合起来放到程序中是一种不错的选择。最近在做H5滑页时，遇到一些比较大的场景，动辄二十、三十页，而图片更是可恨的能达到上百个，所以就会导致场景在加载的时候遇到网速比较慢的时候，用户等待的时间特别长，这样的话，就有可能导致一部分的用户没有耐心，而丢失这部分用户，于是就有了这里的图片的预加载和懒加载，记个...

SwordFly 2019-08-21 10:37 评论0 收藏0
手摸手-100行代码自己动手写个功能完整的图片懒加载插件

摘要：景科同学的想法很简单，因为本人目前还是一个前端小白，只有通过不断的写，不断的学，在与的相爱相杀中才能更快速的进步。本项目是景科同学自写自测，虽然比较简单，但是不保证没有隐藏的。所以如果看官同学发现还望留言指正，景科同学在此以示感谢。 showImg(https://segmentfault.com/img/remote/1460000014251310?w=841&h=630); 本文...

CompileYouth 2019-08-22 16:07 评论0 收藏0
淘宝新势力周H5性能优化实战

摘要：前言淘宝新势力周春上新是命运石链路链路第一次承接级大促，面对级大促内容丰富且复杂的页面需求，链路遇到了一些性能问题，在未进行性能优化之前，搭建出来的页面，业务方普遍反馈页面卡顿严重，无法滑动。前言淘宝新势力周（春上新）是命运石kimi链路（H5链路）第一次承接S级大促，面对S级大促内容丰富且复杂的页面需求，kimi链路遇到了一些性能问题，在未进行性能优化之前，搭建出来的页面，业务方...

Lionad-Morotar 2019-08-22 16:17 评论0 收藏0
懒加载和预加载

摘要：使用默认是对象，如果是是指使用标签，可以跨域，三懒加载和预加载的对比两者都是提高页面性能有效的办法，两者主要区别是一个是提前加载，一个是迟缓甚至不加载。懒加载对服务器前端有一定的缓解压力作用，预加载则会增加服务器前端压力。一、懒加载 1.什么是懒加载 showImg(https://segmentfault.com/img/remote/1460000016666819); 懒加载也...

appetizerio 2019-08-29 16:57 评论0 收藏0
懒加载和预加载

摘要：使用默认是对象，如果是是指使用标签，可以跨域，三懒加载和预加载的对比两者都是提高页面性能有效的办法，两者主要区别是一个是提前加载，一个是迟缓甚至不加载。懒加载对服务器前端有一定的缓解压力作用，预加载则会增加服务器前端压力。一、懒加载 1.什么是懒加载 showImg(https://segmentfault.com/img/remote/1460000016666819); 懒加载也...

Shonim 2019-08-02 11:41 评论0 收藏0
懒加载和预加载

摘要：使用默认是对象，如果是是指使用标签，可以跨域，三懒加载和预加载的对比两者都是提高页面性能有效的办法，两者主要区别是一个是提前加载，一个是迟缓甚至不加载。懒加载对服务器前端有一定的缓解压力作用，预加载则会增加服务器前端压力。一、懒加载 1.什么是懒加载 showImg(https://segmentfault.com/img/remote/1460000016666819); 懒加载也...

hedzr 2019-08-23 12:19 评论0 收藏0