ajax+lazyload時(shí)lazyload失效問(wèn)題及解決

KitorinZero 發(fā)布于2019-08-02 15:57 / 813人閱讀

摘要：最近寫(xiě)公司的項(xiàng)目的時(shí)候遇到一個(gè)關(guān)于圖片加載的問(wèn)題，所做的頁(yè)面是一個(gè)商城的商品列表頁(yè)，其中需要顯示商品圖片，名稱等信息，因?yàn)樯唐妨斜砜赡軙?huì)很長(zhǎng)，所以其中圖片需要滑到可以顯示的區(qū)域再進(jìn)行加載。

最近寫(xiě)公司的項(xiàng)目的時(shí)候遇到一個(gè)關(guān)于圖片加載的問(wèn)題，所做的頁(yè)面是一個(gè)商城的商品列表頁(yè)，其中需要顯示商品圖片，名稱等信息，因?yàn)樯唐妨斜砜赡軙?huì)很長(zhǎng)，所以其中圖片需要滑到可以顯示的區(qū)域再進(jìn)行加載。
首先我的圖片加載插件使用的是jquery的lazyload，
**一般情況下：**
使用lazyload，只需要引入相關(guān)文件（當(dāng)然jquery也要提前引入）

然后在HTML的img標(biāo)簽中加入類(lèi)名：lazy，圖片的地址使用：data-original = “XXXXXXXXX”，最后再js中加上

$(function(){
    $("img.lazy").lazyload({
        effect: "fadeIn",
        container: $("#lazycontainer")
    }); 
})

這里設(shè)置了圖片加載進(jìn)來(lái)顯示是漸現(xiàn)的效果，以及包裹整個(gè)商品列表的容器container

云服務(wù)器 GPU云服務(wù)器 lazyload jquery lazyload js 云服務(wù)器問(wèn)題及解決方法 ajax 后js失效

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

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

相關(guān)文章

ajax+lazyload時(shí)lazyload失效問(wèn)題及解決

摘要：最近寫(xiě)公司的項(xiàng)目的時(shí)候遇到一個(gè)關(guān)于圖片加載的問(wèn)題，所做的頁(yè)面是一個(gè)商城的商品列表頁(yè)，其中需要顯示商品圖片，名稱等信息，因?yàn)樯唐妨斜砜赡軙?huì)很長(zhǎng)，所以其中圖片需要滑到可以顯示的區(qū)域再進(jìn)行加載。最近寫(xiě)公司的項(xiàng)目的時(shí)候遇到一個(gè)關(guān)于圖片加載的問(wèn)題，所做的頁(yè)面是一個(gè)商城的商品列表頁(yè)，其中需要顯示商品圖片，名稱等信息，因?yàn)樯唐妨斜砜赡軙?huì)很長(zhǎng)，所以其中圖片需要滑到可以顯示的區(qū)域再進(jìn)行加載。首先我的...

tigerZH 2019-08-20 18:37 評(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)致一部分的用戶沒(méi)有耐心，而丟失這部分用戶，于是就有了這里的圖片的預(yù)加載和懶加載，記個(gè)...

SwordFly 2019-08-21 10:37 評(píng)論0 收藏0
墨瞳漫畫(huà)h5一期 vuejs總結(jié)

摘要：歡迎體驗(yàn)提墨瞳漫畫(huà)這里踩的坑主要是組件的重用。這樣可以防止圖和圖片大小不一樣引起的頁(yè)面跳動(dòng)繼而導(dǎo)致的加載圖片時(shí)機(jī)錯(cuò)誤。跨域時(shí)，會(huì)先發(fā)送一個(gè)空的請(qǐng)求來(lái)查看接口是不是支持跨域，再發(fā)送一次真實(shí)請(qǐng)求。前言博主也是vuejs萌新，公司僅我一個(gè)前端，收到做h5的需求后，馬上想到要用下vuejs，于是說(shuō)服領(lǐng)導(dǎo)，開(kāi)始慢慢鉆研，現(xiàn)在記錄一下踩到的坑。這些坑主要是在一些組件的使用上，其它的只要好好看官...

王巖威 2019-08-20 11:10 評(píng)論0 收藏0
iscroll.js和lazyload.js的兼容（滑動(dòng)時(shí)，緩沖好的圖片不更新）

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

Cheng_Gang 2019-08-21 11:39 評(píng)論0 收藏0