jquery实现异步加载图片(懒加载图片一种方式)
首先将插件在jq后面引入
(function($){ //alert($.fn.scrollLoading); $.fn.scrollLoading=function(options){ vardefaults={ attr:"data-url" }; varparams=$.extend({},defaults,options||{}); params.cache=[]; $(this).each(function(){ varnode=this.nodeName.toLowerCase(), url=$(this).attr(params["attr"]); if(!url){ return; } vardata={ obj:$(this), tag:node, url:url }; params.cache.push(data); }); varloading=function(){ varst=$(window).scrollTop(), sth=st+$(window).height(); $.each(params.cache,function(i,data){ varo=data.obj, tag=data.tag, url=data.url; if(o){ post=o.position().top; posb=post+o.height(); if((post>st&&postst&&posb 然后在底部初始化
$(document).ready(function(){ //实现图片慢慢浮现出来的效果 $("img").load(function(){ //图片默认隐藏 $(this).hide(); //使用fadeIn特效 $(this).fadeIn("5000"); }); //异步加载图片,实现逐屏加载图片 $(".scrollLoading").scrollLoading(); });需要修改img标签为
data-url表示将要异步加载的图片,src表示首先加载的图片(一般会是小图片,或者是一个动画,网页中全部的src链接同一个图片,这样网页就加载快好多,这个时候再异步的加载要加载的图片,也就现在要说的功能)
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。