對(duì)jquery.lazyload.js使用的心得

April 發(fā)布于2019-08-26 10:41 / 2479人閱讀

摘要：今天想對(duì)項(xiàng)目中做一些優(yōu)化，做一個(gè)圖懶加載，我用的是，網(wǎng)址。這篇文章很簡(jiǎn)單，我寫的目的就是為了測(cè)試背景圖是否可以用。

今天想對(duì)項(xiàng)目中做一些優(yōu)化，做一個(gè)圖懶加載，我用的是jquery.lazyload.js，網(wǎng)址：http://www.jq22.com/jquery-in...。
給的案例是針對(duì)img，然后我猜測(cè)能否在背景圖也能夠?qū)崿F(xiàn)，粗略的看了一下源碼，好像是有這個(gè)功能的：

我把自己測(cè)試的代碼貼出來，包括img和背景圖懶加載測(cè)試（js和圖片需要自己引入）：





Lazy Load Enabled

這個(gè)插件的配置http://www.jq22.com/jquery-in...，這里有的。
這篇文章很簡(jiǎn)單，我寫的目的就是為了測(cè)試背景圖是否可以用。
但是這個(gè)插件無論是是用img還是背景圖都寬高都是需要寫上去的，寫在行內(nèi)還是style樣式里面都可以，這對(duì)頁面適配不是很友好，我不知道有沒有朋友解決這種問題，如果有的話也可以分享一下。

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/106609.html

相關(guān)文章

對(duì)jquery.lazyload.js使用的心得

摘要：今天想對(duì)項(xiàng)目中做一些優(yōu)化，做一個(gè)圖懶加載，我用的是，網(wǎng)址。這篇文章很簡(jiǎn)單，我寫的目的就是為了測(cè)試背景圖是否可以用。今天想對(duì)項(xiàng)目中做一些優(yōu)化，做一個(gè)圖懶加載，我用的是jquery.lazyload.js，網(wǎng)址：http://www.jq22.com/jquery-in...。給的案例是針對(duì)img，然后我猜測(cè)能否在背景圖也能夠?qū)崿F(xiàn)，粗略的看了一下源碼，好像是有這個(gè)功能的：showImg(...

mo0n1andin 2019-08-30 15:44 評(píng)論0 收藏0
iscroll.js和lazyload.js的兼容（滑動(dòng)時(shí)，緩沖好的圖片不更新）

摘要：另外我的這段代碼可謂神來之筆，大家好好看看這一步很重要，否則圖片不能完成緩沖效果原理在正在加載完后，就設(shè)置為可以緩沖。加載圖片使用的效果淡入在離可視區(qū)以內(nèi)的圖片也開始加載了，提升體驗(yàn)度取消等默認(rèn)不可點(diǎn)擊效果解決。以前在做項(xiàng)目的時(shí)候，把jquery.lazyload.js和iscroll.js一起使用，當(dāng)滑動(dòng)頁面的時(shí)候，iscroll的滑動(dòng)效果出來了，但是圖片懶加載的效果沒出來，主要是...

Cheng_Gang 2019-08-21 11:39 評(píng)論0 收藏0
lozad.js：懶加載神器

摘要：是基于的輕量級(jí)高性能可配置的純并且無依賴的懶加載器，其能夠被用于進(jìn)行圖片等多種形式的元素。在上，至今短短的一個(gè)月的時(shí)間，已經(jīng)收獲了的。傳送門阮一峰老師使用教程懶加載懶加載其實(shí)就是延遲加載。 showImg(https://github.com/ApoorvSaxena/lozad.js/raw/master/banner/lozad-banner.jpg); Lozad.js 是基于 ...

Magicer 2019-08-21 17:00 評(píng)論0 收藏0
圖片的預(yù)加載和懶加載

摘要：圖片的預(yù)加載是提升用戶體驗(yàn)而損失性能的一種做法，而懶加載的性能就比較好了，所以將兩個(gè)結(jié)合起來放到程序中是一種不錯(cuò)的選擇。最近在做H5滑頁時(shí)，遇到一些比較大的場(chǎng)景，動(dòng)輒二十、三十頁，而圖片更是可恨的能達(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
jQuery動(dòng)畫效果、jQuery插件使用

摘要：一事件的綁定與解綁的簡(jiǎn)單綁定事件新版本使用為指定的元素添加一個(gè)或多個(gè)事件處理程序，并規(guī)定當(dāng)這個(gè)事件發(fā)生時(shí)運(yùn)行的函數(shù)。將整個(gè)文件放至項(xiàng)目的任意目錄不要移動(dòng)其文件結(jié)構(gòu)，它們具有完整的依賴體系。一、事件的綁定與解綁 1.1 jQuery的簡(jiǎn)單綁定 1.1.1 on(events,fn)事件(新版本使用) 為指定的元素添加一個(gè)或多個(gè)事件處理程序，并規(guī)定當(dāng)這個(gè)事件發(fā)生時(shí)運(yùn)行的函數(shù)。on()方法...

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