jquery实现异步加载图片(懒加载图片一种方式)
2017-04-24 10:45
597 查看
首先将插件在jq后面引入
(function($) { // alert($.fn.scrollLoading); $.fn.scrollLoading = function(options) { var defaults = { attr: "data-url" }; var params = $.extend({}, defaults, options || {}); params.cache = []; $(this).each(function() { var node = this.nodeName.toLowerCase(), url = $(this).attr(params["attr"]); if(!url) { return; } var data = { obj: $(this), tag: node, url: url }; params.cache.push(data); }); 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);
然后在底部初始化
$(document).ready(function () { //实现图片慢慢浮现出来的效果 $("img").load(function () { //图片默认隐藏 $(this).hide(); //使用fadeIn特效 $(this).fadeIn("5000"); }); // 异步加载图片,实现逐屏加载图片 $(".scrollLoading").scrollLoading(); });
需要修改img标签为
<img class="scrollLoading" data-url="image/logo.jpg" src="images/load.gif" />
data-url表示将要异步加载的图片,src表示首先加载的图片(一般会是小图片,或者是一个动画,网页中全部的src链接同一个图片,这样网页就加载快好多,这个时候再异步的加载要加载的图片,也就现在要说的功能)
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章推荐
- jquery 异步加载,懒加载图片一种方式
- jquery.lazyload.js 插件实现图片异步延迟加载
- android多种方式实现异步加载图片
- android多种方式实现异步加载图片
- Android实战简易教程<四十九>(两种方式实现网络图片异步加载)
- jQuery加载外部文件的方式get、post、ajax、load的区别及异步加载的实现
- jquery lazyload 和 echo 两种方式实现图片延迟加载
- JQuery加载外部文件的方式get、post、ajax、load的区别及异步加载的实现
- jquery.lazyload.js实现图片异步延迟加载
- js 实现图片预加载 (js操作 Image对象属性complete ,事件onload 异步加载图片)
- jquery.lazyload 插件实现图片延迟加载
- Android实现ListView异步加载图片
- 用jQuery实现图片预加载和等比例缩小,大图可以点击关闭
- [javascript]首页图片自动切换的一种实现方式
- JavaScript判断远程图片是否存在,加载完成:onerror 属性- & jQuery实现(如果因为网络或图片的原因发生异常,则显示该图片)~
- Android实现ListView异步加载图片
- 用jQuery实现图片预加载和等比例缩小,大图可以点击关闭
- 网络图片延迟加载实现代码 超越jquery控件