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

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


代码如下:

<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像素。当然了你也可以通过设置占位符图片和自定事件来触发加载图片事件
查看源代码打印帮助


代码如下:

$("img").lazyload({
placeholder : "img/grey.gif",
event : "click"
});

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


代码如下:

$("img").lazyload({
placeholder : "img/grey.gif",
effect : "fadeIn"
});

下载地址： source, minified or packed

赞 (0)

相关推荐

  • 使用jquery实现的一个图片延迟加载插件（含图片延迟加载原理）

    图片延迟加载也称懒加载,通常应用于图片比较多的网页,如果一个页面图片比较多,且页面高度或宽度有好几屏,页面初次加载时,只显示可视区域的图片,当页面滚动的时候,图片进入了可视区域再进行加载,这样可以显著的提高页面的加载速度,更少的图片并发请求数也可以减轻服务器的压力.如果用户仅仅在首屏停留,还可以节省流量.如果TAB中的图片较多,也同样可以应用于TAB中,当触发TAB时再进行图片的加载. 图片延迟加载的原理比较简单,先将图片的真实地址缓存在一个自定义的属性(lazy-src)中,而src地址使用一

  • jquery lazyload延迟加载技术的实现原理分析

    前言 懒加载技术(简称lazyload)并不是新技术,它是js程序员对网页性能优化的一种方案.lazyload的核心是按需加载.在大型网站中都有lazyload的身影,例如谷歌的图片搜索页,迅雷首页,淘宝网,QQ空间等.因此掌握lazyload技术是个不错的选择,可惜jquery插件lazy load官网(http://www.appelsiini.net/projects/lazyload)称不支持新版浏览器. lazyload在什么场合中应用比较合适? 涉及到图片,falsh资源,ifram

  • jQuery延迟加载图片插件Lazy Load使用指南

    jQuery延迟加载图片插件Lazy Load使用指南

    Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预加载的处理方式正好是相反的. 在包含很多大图片长页面中延迟加载图片可以加快页面加载速度. 浏览器将会在加载可见图片之后即进入就绪状态. 在某些情况下还可以帮助降低服务器负担. 怎样使用? Lazy Load 依赖于 jQuery. 请将下列代码加入页面 head 区域: 复制代码 代码如下: <sc

  • 网络图片延迟加载实现代码 超越jquery控件

    网络图片延迟加载实现代码 超越jquery控件

    淘宝,QQ,还有当当,亚马逊之类网之类的都有这个效果,原理是分段加载图片,主要用于大型网站节省带宽,可是他们提供的东西压缩混淆看不清,还有的要基于什么雅虎的什么库,总之是很麻烦的,JQ的控件倒是够清晰了,只是还是没有达到节省网络带宽的效果,于是我在JQ懒加载控件上进行一些改进,改进以后的最大的特点就是调用方便,项目中不需要什么太多更改,而且JS文件也不大.(泡泡网工!转载注明出处,谢谢) 1.给泡泡网开发控件,本来想直接用JQ的延迟控件,但是JQ的延迟控件只是加快了加载速度,没有省带宽,也就是说

  • jquery插件lazyload.js延迟加载图片的使用方法

    如果一个网页很长并且有很多图片的话,下载图片就需要很多时间,那么就会影响整个网页的加载速度,而这款延迟加载插件,会通过你的滚动情况来加载你需要看的图片,然后它才会从后台请求下载图片,最后显示出来.通过这个插件,可以在需要显示图片的时候,才下载图片,从而可以减少服务器的压力,提高页面加载速度. Lazy Load 插件原理 修改目标img元素的src属性为orginal属性,从而中断图片的加载.检测滚动状态,然后把网页可视区域中的img的src属性还原然后加载图片,从而制造了一种缓冲加载的效果.代

  • Lazy Load 延迟加载图片的jQuery插件中文使用文档

    什么是LazyLoad技术? 在页面上图片比较多的时候,打开一张页面必然引起与服务器大数据量的交互.尤其是对于高清晰的图片,占了几百K的空间.Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预加载的处理方式正好是相反的. 在包含很多大图片长页面中延迟加载图片可以加快页面加载速度. 浏览器将会在加载可见图片之后即进入就绪状态. 在某些情况下还可以帮助

  • jquery图片延迟加载 前端开发技能必备系列

    目前,主要的购物网站都采用了这种加载方式.今天在一个网友的站里发现一个图片延迟加载的插件,很好用,在这里介绍一下. 先介绍一下图片延迟加载原理.我们需要先将图片的真实地址保存在一个自定义的属性中(属性名任你发挥吧,这里我用的是lazy-src),而图片的src属性中用一个占位图片来替代,这个占位图片当然是越小越好,它基本上只干活.不露面. 复制代码 代码如下: <img src="images/placeholder.png" lazy-src="images/real

  • jquery延迟加载外部js实现代码

    复制代码 代码如下: var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); $.getScript(gaJsHost + "google-analytics.com/ga.js",function(){ try { var pageTracker = _gat._getTracker("U

  • Jquery图片延迟加载插件jquery.lazyload.js的使用方法

    最新版的jquery.lazyload.js已不再是伪的延迟加载了 一.请按照基本使用方法说明设置 复制代码 代码如下: //载入JavaScript 文件<script src="jquery.js" type="text/javascript"></script><script src="jquery.lazyload.js" type="text/javascript"></sc

  • Lazy Load 延迟加载图片的 jQuery 插件

    怎样使用? Lazy Load 依赖于 jQuery. 请将下列代码加入页面 head 区域: 复制代码 代码如下: <script src="jquery.js" type="text/javascript"></script> <script src="jquery.lazyload.js" type="text/javascript"></script> 并且在你的执行代码

  • Jquery.LazyLoad.js修正版下载，实现图片延迟加载插件

    从网上下载来的版本多多少少都有些BUG,尤其是加载后在IE6和IE7下图片闪动是个大问题,在网上查了很久,也没有找到相关的解决方案.没解决方案,就得发挥咱DIY的精神,自己想法解决,分析了BUG,理了理思路,结合前段时间我做弹出窗口特效的方法,解决了Jquery.LazyLoad.js的兼容问题,现将思路和方法与大家分享一下. 解决思路大致是两点,一是从LazyLoad本身的滤镜参数下手,发现有一个参数在IE6和IE7是可以用的,就是show,那么在IE6和IE7下用这个特效:二是IE8以上(包

  • jquery.lazyload 实现图片延迟加载jquery插件

    什么是ImageLazyLoad技术 在页面上图片比较多的时候,打开一张页面必然引起与服务器大数据量的交互.尤其是对于高清晰的图片,占的几M的空间.ImageLazyLoad技术就是,当前可见界面的图片是加载进来的,而不可见页面(通过滚动条下拉可见)中的图片是不加载的,这样势必会引起速度上质的提升. 怎么实现ImageLazyLoad 一.使用JQuery插件 ,插件名: jquery.lazyload(7kb大小),压缩后(3kb大小) 在线压缩js http://closure-compil

  • jQuery实现鼠标滚动图片延迟加载效果附源码下载

    jQuery实现鼠标滚动图片延迟加载效果附源码下载

    这里延迟加载的意思是,拖动滚动条时,在图片出现在浏览器显示区域后才加载显示.在这之前全部图片都由一张图片代替.节省流量,减轻服务器负担. 请用鼠标或者键盘方向键使页面向下滚动,注意图片的变化.本特效没有使用专门的图片延迟加载插件,只需要一小段jQuery代码就实现了图片延迟加载,使用非常方便.在本文后面附有源码下载. 效果展示     源码下载 用到的加载中的图片: 代码如下: <!DOCTYPE html> <html> <head> <meta charset

随机推荐