jquery 插件实现图片延迟加载效果代码

2016-02-19 13:54 5 1 收藏

下面是个超简单的jquery 插件实现图片延迟加载效果代码教程，图老师小编精心挑选推荐，大家行行好，多给几个赞吧，小编吐血跪求~

【 tulaoshi.com - Web开发】

减少了页面加载的时间了，也减轻了服务器的压力，看了一下javascript源码，里面写的了lazyload，我就百度了一下，找到了一个jquery的实现这种效果的插件：jquery.lazyload，一个很不错的插件。
比如你打开一个比较大或者长的网页，那么Lazy load能够实现先加载您所看到区域的图片，等你滚动到哪里，就加载那里的图片。
如果你是图片网站，而且一个页面要加载很多图片，这个插件是个很不错的选择。
如何使用，引用如下js：
查看源代码打印帮助

代码如下：

（本文来源于图老师网站，更多请访问http://www.tulaoshi.com/webkaifa/）（本文来源于图老师网站，更多请访问http://www.tulaoshi.com/webkaifa/）
script src="jquery.js" type="text/javascript"/script
script src="jquery.lazyload.js" type="text/javascript"/script

在你的页面中加入如下的javascript：
查看源代码打印帮助1 $("img").lazyload();
这将会使所有的图片都延迟加载。插件还有几个配置项可供设置。
当然对于一些用户来说就上面的功能远远是不能达到要求的，下面我们看看是如何设置灵敏度的。我们可以设置阀值来控制这个功能比较人性化吧。
$(“img”).lazyload({ threshold : 200 });
把阀值设置成200 意思就是当图片没有看到之前先load 200像素。当然了你也可以通过设置占位符图片和自定事件来触发加载图片事件
查看源代码打印帮助

代码如下：

（本文来源于图老师网站，更多请访问http://www.tulaoshi.com/webkaifa/）（本文来源于图老师网站，更多请访问http://www.tulaoshi.com/webkaifa/）
$("img").lazyload({
placeholder : "img/grey.gif",
event : "click"
});

我们还可以通过定义effect 参数来定义一些图片显示效果
查看源代码打印帮助

代码如下：

（本文来源于图老师网站，更多请访问http://www.tulaoshi.com/webkaifa/）（本文来源于图老师网站，更多请访问http://www.tulaoshi.com/webkaifa/）
$("img").lazyload({
placeholder : "img/grey.gif",
effect : "fadeIn"
});

下载地址： source, minified or packed

来源:http://www.tulaoshi.com/n/20160219/1605616.html

上一篇： JQuery Dialog(JS 模态窗口,可拖拽的DIV)
下一篇：在Oracle中重编译所有无效的存储过程

看过《jquery 插件实现图片延迟加载效果代码》的人还看了以下文章更多>>

Webjx收集jQuery图片切换效果插件

标签： Web开发

FullScreen Image-Gallery SupersizedGallery ImageRotator Galleria Content-Gallery Galleriffic EasySlider 看中文介绍的猛点此处： http://jsssc.cn/easy-slider-15-the-easiest-jquery-plugin-for-sliding/ ImageScroller ...

jquery 批量上传图片实现代码

标签： Web开发

前台: upload.htm 代码如下： !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" html xmlns="http://www.w3.org/1999/xhtml" head runat="server" titleupload/title link href="upload.css" rel="Stylesheet" / /head body form ul li button id="S...

jQuery Div中加载其他页面的实现代码

标签： Web开发

经过一翻尝试，终于找到了一个自大比较满意的解决方法，现写在自己的博客中与大家分享。第一步需要在签核页面中提供一个区域用来显示表单内容，这里使用的是DIV。代码如下: script type="text/javascript" $(document).ready(function() { loadPage("doc_view", "？php echo $this-doc_view_url . '/flag/1'; ？"); }); /script ？ph...

jquery cookie插件代码类

标签： Web开发

提供方便方法操作cookie : 代码如下: $.cookie('the_cookie'); // 获得cookie $.cookie('the_cookie', 'the_value'); // 设置cookie $.cookie('the_cookie', 'the_value', { expires: 7 }); //设置带时间的cookie $.cookie('the_cookie', 'the_value', { expires: 7, path: '/', domain: 'sosuo8.com', secure: true }); $.cookie('the_...

jQuery 全选效果实现代码

标签： Web开发

多选效果如下图代码如下: 代码如下: script type="text/javascript"!-- $(document).ready(function() { $("#selectall").click(selectAll); }); function selectAll() { var checked = $("#selectall").attr("checked"); $(".selectable").each(function() { var subchecked = $(this).attr("checked"); if (subchecked != ch...

查看更多精彩>>