1. function lazyload(option){
  2. var settings={
  3. defObj:null,
  4. defHeight:
  5. };
  6. settings=$.extend(settings,option||{});
  7. var defHeight=settings.defHeight,defObj=(typeof settings.defObj=="object")?settings.defObj.find("img"):$(settings.defObj).find("img");
  8. var pageTop=function(){
  9. return document.documentElement.clientHeight+Math.max(document.documentElement.scrollTop,document.body.scrollTop)-settings.defHeight;
  10. };
  11. var imgLoad=function(){
  12. defObj.each(function(){
  13. if ($(this).offset().top<=pageTop()){
  14. var src2=$(this).attr("src2");
  15. if (src2){
  16. $(this).attr("src",src2).removeAttr("src2");
  17. }
  18. }
  19. });
  20. };
  21. imgLoad();
  22.  
  23. // 绑定滚动事件
  24. $(window).bind("scroll",function(){
  25. imgLoad();
  26. });
  27. }
  28.  
  29. lazyload({
  30. defObj:"#plist"
  31. })

原文地址

基于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. 如何减少JS的全局变量污染

    A,唯一变量 B,闭包

  2. MyEclipse 选中右侧编辑的文件时自动展开左侧目录树

  3. Android之TabHost布局(转)

    1.概念 盛放Tab的容器就是TabHost.TabHost的实现有两种方式: 第一种继承TabActivity,从TabActivity中用getTabHost()方法获取TabHost.各个Tab ...

  4. Boost练习程序(multi_index_container)

    代码来自:http://blog.csdn.net/whuqin/article/details/8482547 该容器能实现多列索引,挺好. #include <string> #inc ...

  5. 在Salesforce中编写Unit Test

    Unit Test 也是一个 Class 文件,所以在创建 Unit Test 的时候要选择 Test Class 类型来创建,请看如下截图(在Eclipse中): 编写 Unit Test 基本流程 ...

  6. hdu 3001(状压dp, 3进制)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3001 由于本题中一个点最多能够访问2次,由此可以联想到3进制; visited[i][j]表示在状态i ...

  7. nginx配置文件nginx.conf

    #定义Nginx运行的用户和用户组user www www; #nginx进程数,建议设置为等于CPU总核心数.worker_processes 8; #全局错误日志定义类型,[ debug | in ...

  8. Jmeter 小攻略(转)

    http://www.myexception.cn/open-source/1346307.html

  9. 【hibernate 报错】No serializer found for class org.hibernate.proxy.pojo.javassist.JavassistLazyInitializer 【get和load的区别】

    报错: HTTP Status 500 - Could not write content: No serializer found for class org.hibernate.proxy.poj ...

  10. Git的安装与使用

    1,下载git https://code.google.com/p/msysgit/downloads/list 2,安装git ,我们选择命令行形式,这样无论在window下还是在linux下 都可 ...