圖片懶加載

StonePanda 發(fā)布于2019-08-02 11:18 / 1675人閱讀

摘要：圖片懶加載部分內(nèi)容請看以下代碼呈現(xiàn)正如以上呈現(xiàn)的部分相比較為簡單主要是個(gè)組成，特別注意的有個(gè)屬性后文會(huì)著重強(qiáng)調(diào)部分此部分內(nèi)容用到部分的內(nèi)容所以看不懂得小伙伴們可以先普及下的知識網(wǎng)頁的全局樣式解決兼容問題宋

圖片懶加載

HTML部分：

內(nèi)容請看以下代碼呈現(xiàn)：

正如以上呈現(xiàn)的HTML部分相比較為簡單主要是個(gè)UL li 組成，特別注意的有個(gè)data-src屬性后文會(huì)著重強(qiáng)調(diào)

css部分

此部分內(nèi)容用到部分H5的內(nèi)容所以看不懂得小伙伴們可以先普及下H5的知識

/*網(wǎng)頁的全局樣式 解決兼容問題*/
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);
            }
        }

代碼呈現(xiàn)部分我用到了CONMON.css如果不曉得的話，我也有一個(gè)公司的標(biāo)準(zhǔn)，具體在本人頁面瀏覽注意

JS部分

此部分為關(guān)鍵部分特別地方以加有注釋

希望各位腳本伙伴們能夠一起努力！！