<%@ 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. 01_1_jdom调用xml文件

    01_1_jdom调用xml文件 1. 导入jdom.jar包 2. xml文件内容 test.xml <?xml version="1.0" encoding=" ...

  2. 解决cocos2dx 3.x 导入cocostudio的ui界面出现错位问题

    笔者今天发现导入cocostudio的ui界面时,会有部分控件出现错位的现象,后来我看了一下源码,发现是部分控件是没有继承 Layout类,导致不能设置控件位置造成,原因可以看看cocos2dx 源码 ...

  3. bug汇总

    bug 2018年8月23日 bug 1:散点图画不出来. plt.scatter(validation_examples["longitude"], validation_exa ...

  4. poj3335 Rotating Scoreboard

    题目描述: vjudge POJ 题解: 半平面交判核的存在性. 重点在于一个点的核也算核. 这样的话普通的求多边形的版本就要加一个特判. 就是把剩下的一个节点暴力带回所有直线重判,这时判叉积是否$\ ...

  5. centos里没有pip命令怎么办？

    刚刚入门python的嘛,然后这个centos也是不是那么熟悉!! pip在centos也没有,所以网上找来资料,3条语句就搞定啦! 1.查看是否安装依赖包,没安装先安装: yum install e ...

  6. 图解一致性协议2PC和3PC

    原图地址:https://www.processon.com/diagraming/5b89f6ace4b0d4d65bf10786

  7. DeepFaceLab小白入门（6）：脸部替换以及合成视频！

    前面的都是准备工作,这个环节才是真的换脸.换脸主要分两部分,1,图片换脸,2,把图片合成视频. 7) convert H64 debug.bat 这个环节是和训练环节相对于的,比如我们之前选的是H64 ...

  8. ZOJ 2314 (sgu 194) Reactor Cooling (无源汇有上下界最大流)

    题意: 给定n个点和m条边, 每条边有流量上下限[b,c], 求是否存在一种流动方法使得每条边流量在范围内, 而且每个点的流入 = 流出 分析: 无源汇有上下界最大流模板, 记录每个点流的 in 和 ...

  9. 实践自己的WebSite______流水

    尝试从头至尾搭建一个MVC的网站,主要以流水的方式进行进度和记录,而不讨论技术的部分. 1,在Controller下创建两个文件夹,分别为sys和Business,分别对应于系统功能和业务逻辑.比如登 ...

  10. NAT(地址转换技术)详解(转载)

    作者:逃离地球的小小呆 来源:CSDN 原文:https://blog.csdn.net/gui951753/article/details/79593307版权声明:本文为博主原创文章,转载请附上博 ...