iscoll 圖片懶加載

Edison 發(fā)布于2019-08-21 11:33 / 1127人閱讀

摘要：今天在用插件做滾動(dòng)效果的時(shí)候，要實(shí)現(xiàn)滾動(dòng)過(guò)程中，圖片的懶加載，網(wǎng)上搜了下，沒有現(xiàn)成的。自己嘗試寫代碼后，成功實(shí)現(xiàn)。先將源代碼貼出如下。為一張背景圖，用于顯示公司默認(rèn)圖片的圖片，有沒有都可以

今天在用iscoll 插件做滾動(dòng)效果的時(shí)候，要實(shí)現(xiàn)滾動(dòng)過(guò)程中，圖片的懶加載，網(wǎng)上搜了下，沒有現(xiàn)成的。
自己嘗試寫代碼后，成功實(shí)現(xiàn)。先將源代碼貼出如下。
iScroll版本為5，移動(dòng)端庫(kù)為 zepto

//初始化iscroll            
var myScroll = new IScroll("#wrap");

//綁定滾動(dòng)停止事件
myScroll.on("scrollEnd",function(){                  
        showImage();
});
                    
//顯示圖片
function showImage(){
    $.each($(".lazy"),function(i,el){
        if(isNeedLoad(el)){                                             
                el.src = $(el).removeClass("lazy").data("src");                                         
        }
    });     
}
                    
//是否需要加載圖片
function isNeedLoad(el){
        var coords = el.getBoundingClientRect();
        return (coords.top < window.innerHeight && coords.bottom > window.innerHeight) || (coords.bottom > 0 && coords.top < 0) || (coords.top > 0 && coords.bottom < window.innerHeight);
}

//手動(dòng)執(zhí)行一次，將一開始需要展示的圖片先顯示出來(lái)
showImage();

  HTML代碼如下：
  //black.gif是張1*1的空白圖片   class="lazy" 為需要做懶加載效果載的圖片
                       
                                                                                
                                                                                    
 CSS代碼如下。                                                                               
  .h-content-body img{max-width: 100%;height:188px;display: block;margin:0.6rem auto;border-radius: 2px;transition:all .5s;opacity:1;}
  .h-content-body img.lazy{opacity:.5;background: url(../img/bg-img.png) no-repeat center center;}   .
  //background為一張背景圖，用于顯示公司默認(rèn)圖片logo的圖片，有沒有都可以

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/86838.html

相關(guān)文章

移動(dòng)端滾動(dòng)研究

摘要：還會(huì)有一個(gè)性能上的問(wèn)題就是當(dāng)頁(yè)面的列表過(guò)長(zhǎng)，元素過(guò)多時(shí)，在模擬滾動(dòng)，下拉刷新這段時(shí)間內(nèi)，頁(yè)面也會(huì)有卡頓現(xiàn)象，這里采取了一個(gè)優(yōu)化策略即列表較長(zhǎng)時(shí)數(shù)量較多時(shí)，在觸發(fā)下拉刷新的時(shí)機(jī)時(shí)將頁(yè)面視窗之外的元素隱藏或者存放在里面。移動(dòng)web滾動(dòng)問(wèn)題在移動(dòng)端如果使用局部滾動(dòng)，意思就是我們的滾動(dòng)在一個(gè)固定寬高的div內(nèi)觸發(fā)，將該div設(shè)置成overflow:scroll/auto;來(lái)形成div內(nèi)部的...

ghnor 2019-08-23 14:32 評(píng)論0 收藏0
圖片的預(yù)加載和懶加載

摘要：圖片的預(yù)加載是提升用戶體驗(yàn)而損失性能的一種做法，而懶加載的性能就比較好了，所以將兩個(gè)結(jié)合起來(lái)放到程序中是一種不錯(cuò)的選擇。最近在做H5滑頁(yè)時(shí)，遇到一些比較大的場(chǎng)景，動(dòng)輒二十、三十頁(yè)，而圖片更是可恨的能達(dá)到上百個(gè)，所以就會(huì)導(dǎo)致場(chǎng)景在加載的時(shí)候遇到網(wǎng)速比較慢的時(shí)候，用戶等待的時(shí)間特別長(zhǎng)，這樣的話，就有可能導(dǎo)致一部分的用戶沒有耐心，而丟失這部分用戶，于是就有了這里的圖片的預(yù)加載和懶加載，記個(gè)...

SwordFly 2019-08-21 10:37 評(píng)論0 收藏0
手摸手-100行代碼自己動(dòng)手寫個(gè)功能完整的圖片懶加載插件

摘要：景科同學(xué)的想法很簡(jiǎn)單，因?yàn)楸救四壳斑€是一個(gè)前端小白，只有通過(guò)不斷的寫，不斷的學(xué)，在與的相愛相殺中才能更快速的進(jìn)步。本項(xiàng)目是景科同學(xué)自寫自測(cè)，雖然比較簡(jiǎn)單，但是不保證沒有隱藏的。所以如果看官同學(xué)發(fā)現(xiàn)還望留言指正，景科同學(xué)在此以示感謝。 showImg(https://segmentfault.com/img/remote/1460000014251310?w=841&h=630); 本文...

CompileYouth 2019-08-22 16:07 評(píng)論0 收藏0
淘寶新勢(shì)力周H5性能優(yōu)化實(shí)戰(zhàn)

摘要：前言淘寶新勢(shì)力周春上新是命運(yùn)石鏈路鏈路第一次承接級(jí)大促，面對(duì)級(jí)大促內(nèi)容豐富且復(fù)雜的頁(yè)面需求，鏈路遇到了一些性能問(wèn)題，在未進(jìn)行性能優(yōu)化之前，搭建出來(lái)的頁(yè)面，業(yè)務(wù)方普遍反饋?lái)?yè)面卡頓嚴(yán)重，無(wú)法滑動(dòng)。前言淘寶新勢(shì)力周（春上新）是命運(yùn)石kimi鏈路（H5鏈路）第一次承接S級(jí)大促，面對(duì)S級(jí)大促內(nèi)容豐富且復(fù)雜的頁(yè)面需求，kimi鏈路遇到了一些性能問(wèn)題，在未進(jìn)行性能優(yōu)化之前，搭建出來(lái)的頁(yè)面，業(yè)務(wù)方...

Lionad-Morotar 2019-08-22 16:17 評(píng)論0 收藏0
懶加載和預(yù)加載

摘要：使用默認(rèn)是對(duì)象，如果是是指使用標(biāo)簽，可以跨域，三懶加載和預(yù)加載的對(duì)比兩者都是提高頁(yè)面性能有效的辦法，兩者主要區(qū)別是一個(gè)是提前加載，一個(gè)是遲緩甚至不加載。懶加載對(duì)服務(wù)器前端有一定的緩解壓力作用，預(yù)加載則會(huì)增加服務(wù)器前端壓力。一、懶加載 1.什么是懶加載 showImg(https://segmentfault.com/img/remote/1460000016666819); 懶加載也...

appetizerio 2019-08-29 16:57 評(píng)論0 收藏0