LazyLoad是一个Js编写的Jq插件,它可以延迟加载页面中的图片,在浏览器可视范围中的图片会被加载。
如何使用:LazyLoad依赖于Jquery,在html的结尾处 ,就是在</body>前。
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.lazyload.js"></script>
你必须改变图片的标签,图片的地址必须放到data-original属性上。给懒加载图片一个指定的class(例如:lazy)代码如下:
html:<img class="lazy" alt="" width="640" height="480" data-original="img/example.jpg" />
js:$(function() {
$("img.lazy").lazyload();
})
这会将所有图进行延迟加载
设置临界点
默认情况下只有图片出现在屏幕时才会加载,如果你想提前加载图片,那么可以设置threshold,这个属性的单位是px,不过赋值的时候不用带px ,呵呵。
设置事件来触发加载
$("img.lazy").lazyload({
event : "click"
});
使用特效
$("img.lazy").lazyload({
effect : "fadeIn"
});

jquery lazy load的更多相关文章

  1. jQuery Lazy Load 图片延迟加载

    基于 jQuery 的图片延迟加载插件,在用户滚动页面到图片之后才进行加载. 对于有较多的图片的网页,使用图片延迟加载,能有效的提高页面加载速度. 版本: jQuery v1.4.4+ jQuery ...

  2. jQuery Lazy Load图片懒加载

    传送门:官网地址,jQuery Lazy Load v1.7.2下载,Github 使用方法: 1.引用js文件 <script src="jquery.js">< ...

  3. Lazy Load 图片延迟加载(转)

    jQuery Lazy Load 图片延迟加载来源 基于 jQuery 的图片延迟加载插件,在用户滚动页面到图片之后才进行加载. 对于有较多的图片的网页,使用图片延迟加载,能有效的提高页面加载速度. ...

  4. Lazy Load, 延迟加载图片的 jQuery 插件.

    Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...

  5. jQuery延迟加载插件(Lazy Load)详解

    最 新版本的Lazy Load并不能替代你的网页.即便你使用JavaScript移除了图片的src属性,有些现代的浏览器仍然会加载图片.现在你必须修改你的html代 码,使用占位图片作为img标签的s ...

  6. 延迟加载图片的 jQuery 插件:Lazy Load

    网站的速度非常重要,现在有很多网站优化的工具,如 Google 的Page Speed,Yahoo 的 YSlow,对于网页图片,Yahoo 还提供 Smush.it这个工具对图片进行批量压缩,但是对 ...

  7. Lazy Load, 延迟加载图片的 jQuery 插件 - NeoEase

    body { font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI ...

  8. jQuery Wookmark Load 瀑布流布局实例演示

    瀑布流布局非常适合大量图片的展示,一改过去裁剪图片尺寸统一的排版,每张图片都能完全展示,并错落有致,让人眼前一亮. 版本: jQuery v1.4.3+ jQuery Wookmark Load v1 ...

  9. jquery的load和get的区别

    jquery的load把返回的数据放到指定的元素中,不是全局函数:jquery的get把返回的数据交给用户处理,是全局函数. load和get同样是jquery的ajax函数,load的实现,几乎等于 ...

随机推荐

  1. nltk 词性解析

    转载链接: https://blog.csdn.net/pengjian444/article/details/81143983

  2. adjustResize模式下ExpandaleListView中输入框焦点错乱及布局底部的导航栏被顶在键盘上方的处理

    为了更好的用户体验,煎熬了许久,得到这么个解决方案.在此记录下来,以供后来者参考. 第一部分 清单文件中组件activity的android:windowSoftInputMode属性值的含义: [A ...

  3. Kali Linux安装字典StarDict

     Kali Linux安装字典StarDictStartDict是国外知名的字典框架,也可以加入国内翻译工具的字典.Kali Linux软件源提供该字典框架.用户需要安装qstardict软件包和词库 ...

  4. JAVA基础复习与总结<五> String类_File类_Date类

    String类 .Java字符串就是Unicode字符序列,例如串“Java”就是4个Unicoe字符组成. .Java没有内置的字符串类型,而是在标准java类库中提供了一个预定义的类String, ...

  5. Git提交代码(要有GitHub账号)

    分享一下Git提交模式代码(只是提交到GitHub仓库而已,没有其他的操作) 这个的前提是你已经安装了Node.js.Git 下面来看: 1.  cd进入目录 2.  把当前目录变成git可以管理的仓 ...

  6. 《SpringMVC从入门到放肆》十三、SpringMVC数据校验

    上一章,我们学习了SpringMVC的自定义类型转换器,但是如果转换后的数据传递到Controller的方法中,忽然发现有某些属性为Null了,这怎么办?我们需要一种有效的数据校验机制,来对数据进行有 ...

  7. 团队项目:Recycle

    一.团队名字 地球保卫队(EPT) 二.团队阵容 1.项目部分 小组成员思维活跃,仅仅在一节课的时间里提出了n个颠覆软件开发界的思维的idea,最后在层层pk最后留下了八个惊世骇俗的想法.其中包括了要 ...

  8. (一) sublime安装和使用

    1  下载安装sublime 可以破解也可以不破解 2 html基础架子自动生成插件Emmet的安装 3 Emmet 安装失败解决 4 快捷键设置和汇总 4 其他sublime插件汇总

  9. Java实验环境的搭建

    一.下载并安装JDK 1.官网下载安装 打开浏览器,输入http://www.oracle.com/index.html点击进入下载: 点击—>Downloads—>选择Java(JDK) ...

  10. C# 窗体打开拖动到窗体的文件

    private void Form3_DragEnter(object sender, DragEventArgs e) { if (e.Data.GetDataPresent(DataFormats ...