做个条记,图片如何实现
什么是LazyLoad按需加载
LazyLoad按需加载采取图片按需加载技能,打开页面时只会加载首屏图片。访客往下滚动时才会陆续加载须要展现的图片,这样非常高效,体验舒适。
做个条记,图片如何实现
做个条记,图片如何实现
LazyLoad按需加载实现方法

我们在自己做网站时,也可以实现LazyLoad按需加载,增强网站的用户体验。下面学做网站论坛就来先容一下LazyLoad按需加载实现方法。(以下会利用到HTML代码,如果对代码不熟习,可以学习一下html视频教程)
引入LazyLoad按需加载必须的二个文件:jquery.js和jquery.lazyload.js。引入方法很大略,只需将下面的代码放到</head>标签上方即可;
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script><script src="https://raw.githubusercontent.com/tuupola/jquery_lazyload/master/jquery.lazyload.min.js"></script>
做个条记,图片如何实现
网站上所有图片都利用以下的格式书写:
<img class="lazy" src="" data-original="图片地址" width="100" height="100" alt="">
做个条记,图片如何实现
在网站的</body>标签上面,放上以下的JS代码,来实现LazyLoad按需加载(
<script type="text/javascript">$(function() { $("img.lazy").lazyload({ threshold : 200, // 设置阀值 effect : "fadeIn" // 设置图片渐入殊效 });});</script>
做个条记,图片如何实现
这样,我们自己在建网站时,也可以轻松实现LazyLoad按需加载(