懶加載

題目1:如何判斷一個(gè)元素是否出現(xiàn)在窗口可視范圍(瀏覽器的上邊緣和下邊緣之間狡赐,肉眼可視)托修。寫一個(gè)函數(shù) isVisible實(shí)現(xiàn)

function isVisible($node){

var scrollDis = $(window).scrollTop();
var windowHeight = $(window).height();
var offsetDis = $node.offset().top;
if(offsetDis<scrollDis+windowHeight && offsetDis>scrollTop )
{
return true;
}else{
return false
}
}

題目2:當(dāng)窗口滾動(dòng)時(shí)葫松,判斷一個(gè)元素是不是出現(xiàn)在窗口可視范圍。每次出現(xiàn)都在控制臺(tái)打印 true 草丧。用代碼實(shí)現(xiàn)

$(window).on('scroll',function (){
   if(isVisible($node)){
   console.log(true);
}else{
   console.log(false);
}
})

function isVisible($node){ 
    var scrollTop = $(window).scrollTop();
    var windowHeight = $(window).height()
    var offsetTop = $node.offset().top
    if(offsetTop < scrollTop + windowHeight && offsetTop > scrollTop){
        return true;
}else{
        return false;
}
}

題目3:當(dāng)窗口滾動(dòng)時(shí),判斷一個(gè)元素是不是出現(xiàn)在窗口可視范圍轰绵。在元素第一次出現(xiàn)時(shí)在控制臺(tái)打印 true家乘,以后再次出現(xiàn)不做任何處理。用代碼實(shí)現(xiàn)

var off = true;
$(window).on('click',function (){
  if(isVisible($node) ){
      if(off){
         console.log(true)
         off =false;
      } 
})

function isVisible($node){
var scrollTop = $(window).scrollTop();
var windowHeight = $(window).height();
var offsetTop = $node.offset();
if(offsetTop<scrollTop + windowHeight && offsetTop>scrollTop){
  return true;
}else{
  return false;
}
}

題目4: 圖片懶加載的原理是什么藏澳?

  • 比如一個(gè)頁面中有很多圖片,如淘寶耀找、京東首頁等等翔悠,如果一上來就發(fā)送這么多請(qǐng)求,頁面加載就會(huì)很漫長(zhǎng)野芒,如果js文件都放在了文檔的底部蓄愁,恰巧頁面的頭部又依賴這個(gè)js文件,那就不好辦了狞悲。更為要命的是:一上來就發(fā)送百八十個(gè)請(qǐng)求撮抓,服務(wù)器可能就吃不消了(又不是只有一兩個(gè)人在訪問這個(gè)頁面)。
  • 圖片懶加載: 就是當(dāng)訪問一個(gè)頁面的時(shí)候摇锋,先把img元素或是其他元素的背景圖片路徑替換成一張大小固定的圖片的路徑(這樣就只需請(qǐng)求一次)丹拯,只有當(dāng)圖片出現(xiàn)在瀏覽器的可視區(qū)域內(nèi)時(shí),才設(shè)置圖片正真的路徑荸恕,讓圖片顯示出來乖酬。
  • 優(yōu)點(diǎn)是: 不僅可以減輕服務(wù)器的壓力,而且可以讓加載好的頁面更快地呈現(xiàn)在用戶面前(用戶體驗(yàn)好)

題目5: 實(shí)現(xiàn)視頻中的圖片懶加載效果
http://js.jirengu.com/fucaropeta/1/edit

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末融求,一起剝皮案震驚了整個(gè)濱河市咬像,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌生宛,老刑警劉巖县昂,帶你破解...
    沈念sama閱讀 212,657評(píng)論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異陷舅,居然都是意外死亡倒彰,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,662評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門蔑赘,熙熙樓的掌柜王于貴愁眉苦臉地迎上來狸驳,“玉大人,你說我怎么就攤上這事缩赛“夜浚” “怎么了?”我有些...
    開封第一講書人閱讀 158,143評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵酥馍,是天一觀的道長(zhǎng)辩昆。 經(jīng)常有香客問我,道長(zhǎng)旨袒,這世上最難降的妖魔是什么汁针? 我笑而不...
    開封第一講書人閱讀 56,732評(píng)論 1 284
  • 正文 為了忘掉前任术辐,我火速辦了婚禮,結(jié)果婚禮上施无,老公的妹妹穿的比我還像新娘辉词。我一直安慰自己,他們只是感情好猾骡,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,837評(píng)論 6 386
  • 文/花漫 我一把揭開白布瑞躺。 她就那樣靜靜地躺著,像睡著了一般兴想。 火紅的嫁衣襯著肌膚如雪幢哨。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 50,036評(píng)論 1 291
  • 那天嫂便,我揣著相機(jī)與錄音捞镰,去河邊找鬼。 笑死毙替,一個(gè)胖子當(dāng)著我的面吹牛岸售,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播蔚龙,決...
    沈念sama閱讀 39,126評(píng)論 3 410
  • 文/蒼蘭香墨 我猛地睜開眼冰评,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來了木羹?” 一聲冷哼從身側(cè)響起甲雅,我...
    開封第一講書人閱讀 37,868評(píng)論 0 268
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎坑填,沒想到半個(gè)月后抛人,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,315評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡脐瑰,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,641評(píng)論 2 327
  • 正文 我和宋清朗相戀三年妖枚,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片苍在。...
    茶點(diǎn)故事閱讀 38,773評(píng)論 1 341
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡绝页,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出寂恬,到底是詐尸還是另有隱情续誉,我是刑警寧澤,帶...
    沈念sama閱讀 34,470評(píng)論 4 333
  • 正文 年R本政府宣布初肉,位于F島的核電站酷鸦,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜臼隔,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 40,126評(píng)論 3 317
  • 文/蒙蒙 一嘹裂、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧摔握,春花似錦寄狼、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,859評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至宁舰,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間奢浑,已是汗流浹背蛮艰。 一陣腳步聲響...
    開封第一講書人閱讀 32,095評(píng)論 1 267
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留雀彼,地道東北人壤蚜。 一個(gè)月前我還...
    沈念sama閱讀 46,584評(píng)論 2 362
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像徊哑,于是被迫代替她去往敵國和親袜刷。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,676評(píng)論 2 351

推薦閱讀更多精彩內(nèi)容

  • 1莺丑、懶加載 1.什么是懶加載著蟹? 懶加載也就是延遲加載。當(dāng)訪問一個(gè)頁面的時(shí)候梢莽,先把img元素或是其他元素的背景圖片路...
    xiaolizhenzhen閱讀 70,457評(píng)論 18 160
  • 1萧豆、懶加載1.什么是懶加載?懶加載也就是延遲加載昏名。當(dāng)訪問一個(gè)頁面的時(shí)候涮雷,先把img元素或是其他元素的背景圖片路徑替...
    Gaochengxin閱讀 374評(píng)論 1 2
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,741評(píng)論 1 92
  • 問答 1. 如何判斷一個(gè)元素是否出現(xiàn)在窗口可視范圍(瀏覽器的上邊緣和下邊緣之間,肉眼可視)仑扑。寫一個(gè)函數(shù) isVi...
    Maggie_77閱讀 205評(píng)論 0 0
  • 宿舍網(wǎng)絡(luò)斷了幾天览爵,然而房東倒是一點(diǎn)都不在意,隨便叫個(gè)師傅來測(cè)外線說沒問題夫壁,然后說發(fā)個(gè)路由器賬號(hào)和密碼讓我自行重啟設(shè)...
    3lia閱讀 268評(píng)論 0 0