jQuery的图片延迟加载技术的应用

发布时间:2021-09-18 15:38:47 作者:chen
来源:亿速云 阅读:162

这篇文章主要讲解了“jQuery的图片延迟加载技术的应用”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“jQuery的图片延迟加载技术的应用”吧!

本文使用David DeSandro写的一个页面布局插件Masonry,该插件基于jQuery库,提供很多参数和方法,可以根据不同的需求定制不同的效果。

XHMTL

首先是要引入jQuery库和Masonry插件。

<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.masonry.min.js"></script>

我们仿照新浪微博构建一个html页面,DIV#container放置多个相同的DIV.photo。

<div id="container">         <div class="photo">            <a href="#"><img src="images/02.jpg" alt="" /></a>            <p><a href="#">菓小菓</a>:随时都要卖,还要又又美味</p>         </div>         .....N个photo...   </div>

CSS

#container{width:780px; margin:10px auto}   .photo{float:left; width:205px; margin:10px; padding:10px; border:1px solid #d3d3d3;    background:#f7f7f7;-moz-border-radius:4px;-khtml-border-radius: 4px;-webkit-border-radius: 4px;     border-radius:4px;}   .photo img{width:205px}   .photo p{line-height:20px; margin:4px auto}

jQuery

$(function(){     $('#container').masonry({       itemSelector : '.photo',       columnWidth : 247     });   });

调用masonry插件,配置参数itemSelector对应的是class为photo的div,columnWidth为247,columnWidth的值是由.photo的宽度+padding*2+margin*2+border*2得到的。

上面只介绍砌墙布局,接下来结合本文把图片加载技术和滚屏加载技术进行介绍。

我们在浏览图片量非常大的页面时,像淘宝商城商品展示、必应图片搜索这类网站,图片的加载非常流畅,其中就应用了图片延迟加载技术。本文讲解Lazyload图片加载插件,当我们打开页面时,首先在屏幕可视区域加载完图片,随着向下滚动页面,图片会陆续加载,从而提升了页面打开速度。

Lazyload是一款基于jQuery的插件,在要显示大量图片的页面,图片是按需加载的,只在浏览器可视区内加载图片,当用户使用滚动条下拉时,后面的图片才会继续加载,从某种意义上讲,这种技术减少了服务器的负载。您可以到Lazyload官网下载***的版本:http://www.appelsiini.net/projects/lazyload。

jQuery的图片延迟加载技术的应用

XHTML

首先载入jquery库和lazyload插件:

<script type="text/javascript" src="jquery.js"></script>   <script type="text/javascript" src="jquery.lazyload.js"></script>

在body中需要放置图片的区域放置多个要显示的图片。图片越多效果越明显。

<img src="images/blank.gif" data-original="images/01.jpg" width="205" height="188" alt="" />

注意,每张图片的src属性对应的是一张预定义的图片,就是再真正的图片还没加载的时候的替代图片,我们通常使用1x1的blank.gif图片。真正的图片是由属性data-original指定的,然后还需要设置图片的宽度和高度。

jQuery

$(function(){     $("img").lazyload({          effect : "fadeIn"     });   });

和许多插件使用一样,只需要在元素上调用lazyload()即可,现在你就可以看到效果了。Lazyload同样提供了多个参数可设置不同的效果。

threshold:灵敏度,即可以通过设置灵敏度来控制图片的加载,如设置为200,即200像素前加载图片,默认为0,即到达图片边界时才加载。

event:绑定事件,即可以通过绑定click、mouseover或者任意自定义事件来触发图片的加载。默认是当用户滚动到图片窗口时触发图片加载。

effect:设置效果,即可以设置图片加载时的特效,如fadeIn,默认是show。

您还可以设置一个容器里的图片横向或纵向滚动加载效果,不过这个用的少,详情请查看lazyload官网:http://www.appelsiini.net/projects/lazyload

感谢各位的阅读,以上就是“jQuery的图片延迟加载技术的应用”的内容了,经过本文的学习后,相信大家对jQuery的图片延迟加载技术的应用这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是亿速云,小编将为大家推送更多相关知识点的文章,欢迎关注!

推荐阅读:
  1. web中网站首页的图片延迟加载是怎么实现的
  2. 关于反射技术的实际应用

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

jquery

上一篇:JS变量中有哪些需要注意的

下一篇:怎么用Python实现发邮件功能

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》