jquery插件实现图片延迟加载

在页面中图片较多时，一次性加载所有图片会耗去很多时间。
我们可以选择“延迟加载”的方式来加载图片，相对这种页面的加载速度将会有个很大的提升。
图片延迟加载的原理很简单，依据用户正浏览的位置，当用户决定继续浏览文章中的其它内容时，用户会轻轻滑动滚动条，
到一个新的内容区域，图片延迟加载程序会选择在这个时候向用户展示图片。

说明：1) 引用jquery.js
          2) 引用lazyloading.js
          3) 添加如下Source。如果你用了wordpress自带的jquery.js，则需要用jQuery类，而不能用$符号来代替。
          placeholder表示图片还未加载时显示的图片
          effect为fadeIn表示淡入效果，在Demo地址中这两者都能体现出来。

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery图片延迟加载</title>
<script type="text/javascript" src="http://jileiba.com/wp-includes/js/jquery/jquery.min.js"></script>
<script type="text/javascript" src="http://jileiba.com/wp-includes/js/jquery/jquery.lazyload.js"></script>
<script type="text/javascript">jQuery(document).ready(function(){jQuery("img").lazyload({placeholder : "http://jileiba.com/wp-includes/images/loading03.gif",effect      : "fadeIn"});});
</script>
</head><body><div><img src="data:images/jquery-image-lazy-loading (1).jpg" width="580" /></div><div><img src="data:images/jquery-image-lazy-loading (2).jpg" width="580" /></div><div><img src="data:images/jquery-image-lazy-loading (3).jpg" width="580" /></div><div><img src="data:images/jquery-image-lazy-loading (4).jpg" width="580" /></div><div><img src="data:images/jquery-image-lazy-loading (5).jpg" width="580" /></div><div><img src="data:images/jquery-image-lazy-loading (6).jpg" width="580" /></div><div><img src="data:images/jquery-image-lazy-loading (7).jpg" width="580" /></div><div><img src="data:images/jquery-image-lazy-loading (8).jpg" width="580" /></div><div><img src="data:images/jquery-image-lazy-loading (9).jpg" width="580" /></div>
</body>
</html>

jquery插件实现图片延迟加载相关推荐

使用jquery插件实现图片延迟加载技术
有时我们看到一些大型网站,页面如果有很多图片的时候,当你滚动到相应的行时,当前行的图片才即时加载的,这样子的话页面在打开只加可视区域的图片,而其它隐藏的图片则不加载,一定程序上加快了页面加载的速度,对 ...
jquery.lazyload 插件实现图片延迟加载
jquery.lazyload 插件实现图片延迟加载看到了淘宝产品介绍中,图片是在下拉滚动条时加载,这是一个很不错的用户体验.减少了页面加载的时间了,也减轻了服务器的压力,就查了下用 JQuery. ...
JQuery插件让图片旋转任意角度且代码极其简单 - 摘自网友
JQuery插件让图片旋转任意角度且代码极其简单 2012-04-01 09:57:03 我来说两句收藏我要投稿引入下方的jquery.rotate.js文件,然后通过 ...
JQuery LazyLoad实现图片延迟加载-探究
对于大量图片的网站,图片延迟加载是提高速度和性能的好方法. 目前图片延迟加载主要分两大块,一是触发加载(根据滚动条位置加载图片):二是自动预加载(加载完首屏后n秒后自动加载其他位置的图片).大体常用的 ...
jQuery插件实现图片墙小案例
你想写出绚丽多彩的图片墙吗?想的话就来一起看一下接下来的内容吧接下来就让我们使用两个简单的插件来实现图片墙小案例吧.编写之前需要提前下载lazyload懒加载插件和masonry瀑布流式布局插件.( ...
jquery插件：图片上传按比例预览
js部分是这样的: //**********************图片上传预览插件************************ //作者:IDDQD(2009-07-01) //Email:id ...
jQuery 插件 jSlider 图片轮播
jSlider是一个非常好的图片轮播插件. 有导航箭头,可以自动播放,可以循环播放. 官方网站 https://github.com/copthuy/jSlider <!DOCTYPE html ...
jquery插件：图片截取工具jquery.imagecropper.js
工作需要参考网上的一些代码做了个图片截取工具,最后干脆封装成一个jquery的插件. 除了jquery,本插件还引用了UI库,包括ui.draggable.js ImageCropper 演示 Ima ...
jQuery插件之图片预加载
背景: 图片是web页面的重要组成部分,也是前端页面优化的重要内容.当用户访问一个比较庞大的页面时,若相关资源没有提前加载,可能会展示给用户一片空白,从而导致用户流失等:再比如受网速的影响,资源加载时 ...

jquery插件实现图片延迟加载

jquery插件实现图片延迟加载相关推荐

最新文章

热门文章