One: Pre-load
First, we need to quote JS,
<script src= "/scripts/jquery.lazyload.js" ></script>
Second, the format of the modified IMG is:
<span> favorites </span></a>
Note that path in data-original is the real address of the picture,
Finally, we need to:
$ (function () {
$ ("img"). Lazyload ({
Effect: "FadeIn"
});
});
So, the question is, whether the dynamically loaded picture can be handled as well. In principle, yes, but note that Ajax dynamically loaded images need to be called again in the Ajax success code:
That is similar:
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 + = "Con + = "<div class= ' zhiziimg ' >";
Con + = "<div class= ' dingtop ' >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 does not explain.
Two: Scroll page
Very simple, as follows:
$ (window). Scroll (function () {
Load new content when scrolling to the bottom 100 pixels
if ($ (document). Height ()-$ (this). ScrollTop ()-$ (this). Height () < 100)
{
Alert ("xxx");
}
Loadmore ();
});
Picture delay loading and sliding page flipping