龙空技术网

图片延迟加载——jquery.lazyload.js

寒笛过霜天 74

前言:

此时同学们对“jquery廷时加载广告”大体比较看重,兄弟们都需要分析一些“jquery廷时加载广告”的相关资讯。那么小编同时在网上搜集了一些对于“jquery廷时加载广告””的相关文章,希望小伙伴们能喜欢,你们快快来学习一下吧!

提升网页加载速度的方法有很多种, 用 jquery.lazyload.js 实现图片异步延迟加载, 对于页面包含图片较多的网站来说, 会是个不错的提升网页打开速度的方法。

1、导入 JS 插件:

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

2、在页面中插入 JavaScript 代码:

$(document).ready(function($){$("img").lazyload({    placeholder:"grey.gif", //加载图片前的占位图片    effect:"fadeIn" //加载图片使用的效果(淡入)});});

如何设置单个图片延迟加载

Lazy Load 依赖于 jQuery. 请将下列代码加入HTML的结尾, 也就是</body>前:

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

你必须改变图片的标签, 图像的地址必须放在data-original属性上。给懒加载图像一个特定的class(例如:lazy)。这样你可以很容易地进行图像插件捆绑, 代码如下:

<img class="lazy" alt="" width="640" height="480" data-original="img/example.jpg" />$(function() {    $("img.lazy").lazyload();});

这将使所有 class 为 lazy 的图片将被延迟加载.

标签: #jquery廷时加载广告