function lazyload(option){
var settings={
defObj:null,
defHeight:
};
settings=$.extend(settings,option||{});
var defHeight=settings.defHeight,defObj=(typeof settings.defObj=="object")?settings.defObj.find("img"):$(settings.defObj).find("img");
var pageTop=function(){
return document.documentElement.clientHeight+Math.max(document.documentElement.scrollTop,document.body.scrollTop)-settings.defHeight;
};
var imgLoad=function(){
defObj.each(function(){
if ($(this).offset().top<=pageTop()){
var src2=$(this).attr("src2");
if (src2){
$(this).attr("src",src2).removeAttr("src2");
}
}
});
};
imgLoad(); // 绑定滚动事件
$(window).bind("scroll",function(){
imgLoad();
});
} lazyload({
defObj:"#plist"
})

原文地址

基于jquery的图片懒加载js的更多相关文章

  1. 使用jQuery实现图片懒加载原理

    原文:https://www.liaoxuefeng.com/article/00151045553343934ba3bb4ed684623b1bf00488231d88d000 在网页中,常常需要用 ...

  2. jQuery的图片懒加载

    jQuery的图片懒加载 function imgLazyLoad(options) { var settings = { Id: $('img'), threshold: 100, effectsp ...

  3. jQuery插件图片懒加载lazyload

    来自XXX的前言: 什么是ImageLazyLoad技术 在页面上图片比较多的时候,打开一张页面必然引起与服务器大数据量的 交互.尤其是对于高清晰的图片,占的几M的空间.ImageLazyLoad技术 ...

  4. jQuery.imgLazyLoad图片懒加载组件

    一.前言 当一个页面中请求的图片过多,而且图片太大,页面访问的速度是非常慢的,对用户的体验非常不友好:使用图片懒加载,可以减轻服务器的压力,增加页面的访问量,这里主要是总结一下我自己写的图片懒加载组件 ...

  5. 基于javascript实现图片懒加载(亲测有效)

    这篇文章主要介绍了javascript实现图片懒加载的方法及思路,有时我们需要用懒加载,也就是延迟加载图片的方式,来提高网站的亲和力,需要的朋友可以参考下! 一.定义 图片延迟加载也称为懒加载,延迟加 ...

  6. jQuery实现图片懒加载

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. jquery <img> 图片懒加载 和 标签如果没有加载出图片或没有图片,就显示默认的图片

    参考链接:http://www.jq22.com/jquery-info390 或压缩包下载地址:链接:http://pan.baidu.com/s/1hsj8ZWw 密码:4a7s    下面是没有 ...

  8. 基于jQuery的图片异步加载和预加载实例

    如今的网页中有很多图片,比如相册列表,那么如果一次性读取图片将会瞬间加重服务器的负担,所以我们用jQuery来实现图片的异步加载和预加载功能,这样在页面的可视范围内才会加载图片,当拖动页面至可视界面时 ...

  9. [jQuery插件]手写一个图片懒加载实现

    教你做图片懒加载插件 那一年 那一年,我还年轻 刚接手一个ASP.NET MVC 的 web 项目, (C#/jQuery/Bootstrap) 并没有做 web 的经验,没有预留学习时间, (作为项 ...

随机推荐

  1. 基于SNMP的路由拓扑发现算法收集

    一.三层(网络层)发现 算法来源:王娟娟.基于SNMP的网络拓扑发现算法研究.武汉科技大学硕士学位论文,2008 数据结构: 待检路由设备网关链表:存放指定深度内待检路由设备的网关信息,处理后删除. ...

  2. javascript 面向对象编程小记

    虽然平常用jquery用的很熟,但是基本都是面向过程的写法.一个事件一个function,很少有面向对象的写法.今天得写一个日期控件,不得不用上面向对象编程. 刚开始我的想法是: var datepi ...

  3. Delphi运算符总结

    分类 运算符 操作 操作数 结果类型 范例 算术运算符(加法.减法和乘法运算符的结果为参加运算的两个数据中的精度高的类型) + 加 整数,实数 整数,实数 X + Y - 减 整数,实数 整数,实数 ...

  4. hdu 1251:统计难题(字典树,经典题)

    统计难题 Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 131070/65535 K (Java/Others)Total Submi ...

  5. html5 Canvas绘制图形入门详解

    html5,这个应该就不需要多作介绍了,只要是开发人员应该都不会陌生.html5是「新兴」的网页技术标准,目前,除IE8及其以下版本的IE浏览器之外,几乎所有主流浏览器(FireFox.Chrome. ...

  6. jQuery函数attr()和prop()的区别

    在jQuery中,attr()函数和prop()函数都用于设置或获取指定的属性,它们的参数和用法也几乎完全相同. 但不得不说的是,这两个函数的用处却并不相同.下面我们来详细介绍这两个函数之间的区别. ...

  7. HDU3359 Kind of a Blur(高斯消元)

    建立方程后消元 #include<cstdio> #include<iostream> #include<cstdlib> #include<cstring& ...

  8. 攻城狮在路上(壹) Hibernate(十三)--- Hibernate的检索方式(上)

    Hibernate提供了以下几种检索对象的方式: A.导航对象图检索方式. B.OID检索方式.Session.get() load(); C.HQL检索方式.Query. D.QBC检索方式.Que ...

  9. golang debug with LiteIDE

    golang 的调试比较麻烦,debug stop into 无法跳转到自己写的代码,但是能够跳转到系统提供的代码. 以下是简单的测试代码: package main import ( "f ...

  10. thinkphp计划任务使用cronRun

    thinkphp计划任务使用cronRun .先不管是是否是独立分组,必须在你项目名下的Conf文件夹内创建2个文件一个是tages.php 一个是 crons.php. 注意这两个文件名为think ...