• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >jquery > jquery.lazyload 实现图片延迟加载jquery插件

jquery.lazyload 实现图片延迟加载jquery插件

作者: 字体:[增加 减小] 来源:互联网

通过本文主要向大家介绍了jquery,图片延迟加载等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

什么是ImageLazyLoad技术
在页面上图片比较多的时候,打开一张页面必然引起与服务器大数据量的交互。尤其是对于高清晰的图片,占的几M的空间。ImageLazyLoad技术就是,当前可见界面的图片是加载进来的,而不可见页面(通过滚动条下拉可见)中的图片是不加载的,这样势必会引起速度上质的提升。

怎么实现ImageLazyLoad

一、使用JQuery插件 ,插件名: jquery.lazyload(7kb大小),压缩后(3kb大小)


在线压缩js http://closure-compiler.appspot.com/home
虽然是很牛X的特效,不过用JQuery插件只需要短短几句代码,使用过程如下:

1.导入JS插件
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.lazyload.js" type="text/javascript"></script>
2.在你的页面中加入如下的javascript:

$("img").lazyload();

这将会使所有的图片都延迟加载。


当然插件还有几个配置项可供设置。

1.改变threshold

$(“img”).lazyload({ threshold : 200 });

把阀值设置成200 意思就是当图片没有看到之前先load 200像素。


2.当然了你也可以通过设置占位符图片和自定事件来触发加载图片事件

<img data-lazy-src="path/to/img" alt="something" />

如果您是Jquery,Prototype等这些JS框架的粉丝,他们都有定制的LazyLoad Plugin提供;

可查看http://www.appelsiini.net/projects/lazyload

LazyLoad(延迟加载)技术不仅仅用在对网页中图片的延迟加载,对数据同样可以,Google Reader和Bing图片搜索就把
LazyLoad技术运用的淋漓尽致;

分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • 基于jQuery对象和DOM对象和字符串之间的转化实例
  • jquery+css实现简单的图片轮播效果
  • 使用jQuery实现鼠标点击左右按钮滑动切换
  • jQuery实现上传图片前预览效果功能
  • jQuery初级教程之网站品牌列表效果
  • 基于jquery实现多选下拉列表
  • jQuery接受后台传递的List的实例详解
  • 详解jquery选择器的原理
  • jQuery上传插件webupload使用方法
  • 关于jquery form表单序列化的注意事项详解

相关文章

  • JQuery this 和 $(this) 的区别
  • jquery下jstree简单应用 - v1.0
  • 浅谈jQuery框架Ajax常用选项
  • jquery remove方法应用详解
  • jQuery extend()详解及简单实例
  • jQuery 中$(this).index与$.each的使用指南
  • jquery.blockUI.js上传滚动等待效果实现思路及代码
  • JQuery EasyUI 加载两次url的原因分析及解决方案
  • jquery实现点击弹出可放大居中及关闭的对话框(附demo源码下载)
  • jQuery时间插件jquery.clock.js用法实例(5个示例)

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • ASP.NET jQuery 实例18 通过使用jQuery validation插件校验DropDownList
    • jq实现左侧显示图片右侧文字滑动切换效果
    • Jquery 焦点图 用于图片展示效果代码
    • jQuery中index()的用法分析
    • jQuery多媒体插件jQuery Media Plugin使用详解
    • 基于Jquery 好友选择器V2.0
    • 了解jQuery技巧来提高你的代码(个人觉得那个jquery的手册很不错)
    • jquery中map函数遍历数组用法实例
    • Jquery 弹出层插件实现代码
    • JQuery学习总结【一】

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有