<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Insert title here</title>

<script src="jquery-1.12.3.min.js"></script>

<style type="text/css">

img{

width: 100%;height:500px;

border-bottom: 1px solid black;

}

</style>

</head>

<body>

<img class="lazy" data-src="1.jpg">

<img class="lazy" data-src="2.jpg">

<img class="lazy" data-src="3.jpg">

<img class="lazy" data-src="4.jpg">

<img class="lazy" data-src="5.jpg">

<img class="lazy" data-src="6.jpg">

<img class="lazy" data-src="7.jpg">

<img class="lazy" data-src="8.jpg">

<img class="lazy" data-src="9.jpg">

<img class="lazy" data-src="10.jpg">

<img class="lazy" data-src="11.jpg">

<img class="lazy" data-src="12.jpg">

<img class="lazy" data-src="13.jpg">

<script type="text/javascript">

lazy()

$(window).scroll(function(event){

lazy()

})

function  lazy(){

	var juli=$(window).scrollTop()+$(window).height();

	$.each($('.lazy'),function(){

		var hei=$(this).offset().top+300;

		console.log(hei<juli)

		if(hei<juli){

			$(this).attr('src',$(this).data('src'));

			$(this).removeClass('lazy');

		}

	})

}

</script>

</body>

</html>

　　

用jquery写的图片懒加载的更多相关文章

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

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

  2. jQuery Lazy Load图片懒加载

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

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

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

  4. js可视区域图片懒加载

    可视区域图片懒加载 实现原理,页面滚动时获取需要懒加载的图片,判断此图片是否在可视区域内,是则设置图片data-src地址为src地址,加载图片. html下载地址 <!DOCTYPE html ...

  5. jquery实现简单瀑布流布局（续）：图片懒加载

    # jquery实现简单瀑布流布局(续):图片懒加载 这篇文章是jquery实现简单瀑布流布局思想的小小扩展.代码基于前作的代码继续完善. 图片懒加载就是符合某些条件时才触发图片的加载.最常见的具体表 ...

  6. jquery图片懒加载效果

    1.要引入jquery 2.要引入underscore.js <!DOCTYPE html> <html lang="en"> <head> & ...

  7. jQuery图片懒加载插件jquery.lazyload.js使用实例注意事项说明

    jQuery图片懒加载插件jquery.lazyload.js使用实例注意事项说明 jquery.lazyload.js是一个用JavaScript编写的jQuery插件.它可以延迟加载长页面中的图片 ...

  8. 插件：★★★ !!!图片懒加载 lazyload.js 、 jquery.scrollLoading.js

    插件:图片懒加载 jquery.lazyload.js 2016-3-31 插件说明:http://www.w3cways.com/1765.html (小插件,好用) 下载地址: https://r ...

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

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

随机推荐

  1. 【转】LDA-linear discriminant analysis

    分类问题也可以用降维来理解,比如一个D维的数据点x,我们可以采用下面的映射进行线性的降维, y=θTx 在计算出y后,就可以选择一个阈值h,来进行分类.正如我们在前面的PCA模型中看到的,降维会有信息 ...

  2. ccf 201712-3 Crontab(Python实现)

    一.原题 问题描述 试题编号: 201712-3 试题名称: Crontab 时间限制: 10.0s 内存限制: 256.0MB 问题描述: 样例输入 3 201711170032 201711222 ...

  3. RSA非对称加密算法实现过程

    RSA非对称加密算法实现过程 非对称加密算法有很多,RSA算法就是其中比较出名的算法之一,下面是具体实现过程 <?php /** */ class Rsa { /** * private key ...

  4. zookeeper伪集群（一）

    Zookeeper的安装和配置十分简单, 既可以配置成单机模式, 也可以配置成伪集群模式.集群模式. 本人将对伪集群.集群进行重点介绍: 铺垫: 1.集群必须是奇数(2N+1),伪集群和集群一致. 2 ...

  5. Python基础——文件操作

    写文件 writefile %%writefile ./data/testFile.txt hello python jin tian tian qi bu cuo open覆盖 txt=open(' ...

  6. Educational Codeforces Round 53 (Rated for Div. 2) C Vasya and Robot 二分

    题目:题目链接 思路:对于x方向距离与y方向距离之和大于n的情况是肯定不能到达的,另外,如果n比abs(x) + abs(y)大,那么我们总可以用UD或者LR来抵消多余的大小,所以只要abs(x) + ...

  7. UVa 12235 状压DP Help Bubu

    题解戳这 一开始没看懂题解,后来想明白以后,d(i, j, s, x)是考虑第i本书的时候,前面已经拿走了j本书,剩下的书的种类的二进制状态为s,剩下的最后一本书的编号为x,所能得到的最小混乱度. 这 ...

  8. mysql PacketTooBigException 的处理方式

    SHOW VARIABLES LIKE '%max_allowed_packet%'; set global max_allowed_packet = 2*1024*1024*1000

  9. Nginx与Lua的开发

    1. Lua基础语法 安装lua hello world 也可以编写lua脚本 运行脚本 lua注释 变量 局部变量的话前面加个local 循环 if语句 2. Nginx与Lua开发环境 https ...

  10. git 强制回到以前版本

    git reset dfd3e36a641340a0b86f811df869c4375fabeff2 --hard