jquery实现异步加载图片(懒加载图片一种方式)

前端之家收集整理的这篇文章主要介绍了jquery实现异步加载图片(懒加载图片一种方式)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

首先将插件在jq后面引入

var loading = function() { var st = $(window).scrollTop(),sth = st + $(window).height(); $.each(params.cache,function(i,data) { var o = data.obj,tag = data.tag,url = data.url; if(o) { post = o.position().top; posb = post + o.height(); if((post > st && post < sth) || (posb > st && posb < sth)) { if(tag === "img") { o.attr("src",url); } else { o.load(url); } data.obj = null; } } }); return false; }; loading(); $(window).bind("scroll",loading); }; })(jQuery);

然后在底部初始化

图片慢慢浮现出来的效果 $("img").load(function () { //图片默认隐藏 $(this).hide(); //使用fadeIn特效 $(this).fadeIn("5000"); }); // 异步加载图片,实现逐屏加载图片 $(".scrollLoading").scrollLoading(); });

需要修改img标签

data-url表示将要异步加载的图片,src表示首先加载的图片(一般会是小图片,或者是一个动画,网页中全部的src链接同一个图片,这样网页就加载快好多,这个时候再异步的加载要加载的图片,也就现在要说的功能

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

原文链接:https://www.f2er.com/jquery/39761.html

猜你在找的jQuery相关文章