一：預(yù)加載

首先，我們需要引用JS，

<script src="/Scripts/JQuery.LazyLoad.js"></script>

其次，修改img的格式為：

<img data-original="/images/img01.png" src="/images/grey.gif"><span>收藏</span></a>

注意，data-original中的path才是圖片真是的地址，

最后，我們需要：

$(function () {$("img").lazyload({effect: "fadeIn"}); });

那么，問(wèn)題來(lái)了，動(dòng)態(tài)加載的圖片是否也可以這么處理呢。原理上，是的，但是要注意，ajax動(dòng)態(tài)加載的圖片需要在 ajax 的success 中再次調(diào)用一遍上面的代碼：

即類似：

var getPreOrders = function () {$.ajax({type: "post",datatype: "json",url: "/PreOrder/GetTop10PreOrder",success: function (data) {if (data.F == 1) {alert(data.M);return;} var con = "";$.each(data.O, function (i, item) {if (i > 3)return; con += "<li>";con += " <a href=''>";con += " <img data-original='" + item.ImgPath + "' src='/images/grey.gif' />";con += " <div class='zhiziimg'>";con += " <div class='dingtop'><h2>" + item.Company + "<span>" + TMinjiCommon.FormatTime(item.PublishTime) + "</span></h2></div>";con += " <p>";con += item.OrderContent.substring(0, 20);con += " </p>";con += " </div>";con += " <span class='sjx'></span>";con += " </a>";con += "</li>";}); $("#dingzhi").html(con);$("img").lazyload({effect: "fadeIn"});//alert(con); },error: function (xhr, status, err) {alert(err);}}); };

why不解釋。

?

二：滾動(dòng)翻頁(yè)

很簡(jiǎn)單，只要如下：

$(window).scroll(function () {// 當(dāng)滾動(dòng)到最底部以上100像素時(shí)， 加載新內(nèi)容 if ($(document).height() - $(this).scrollTop() - $(this).height() < 100){//alert("xxx"); }//loadMore(); });

轉(zhuǎn)載于:https://www.cnblogs.com/luminji/p/4766828.html

總結(jié)

以上是生活随笔為你收集整理的图片延迟加载和滑动翻页的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。