<%@ 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. Java第7次作业：造人类（用private封装，用static关键字自己造重载输出方法）什么是面向对象程序设计？什么是类和对象？什么是无参有参构造方法 ？什么是封装？

    什么是面向对象程序设计? 我们称为OOP(Object  Oriented  Programming) 就是非结构化的程序设计 要使用类和对象的方法来进行编程 什么是类,什么是对象 类就是封装了属性和 ...

  2. 【线段树 泰勒展开】Codechef April Challenge 2018 Chef at the Food Fair

    第一次写泰勒展开:本地和CC差距好大 题目大意 大厨住的城市里办了一场美食节.一条街上开设了$N$个摊位,编号为$1∼N$.这天开始时,第$i$个摊位的食物会导致食物中毒的概率是$P_i$.在这一天中 ...

  3. 了解swagger

    https://blog.csdn.net/i6448038/article/details/77622977 随着互联网技术的发展,现在的网站架构基本都由原来的后端渲染,变成了:前端渲染.先后端分离 ...

  4. 初学redis，redis基本数据类型

    String: 1. set key value 2. get key 3. del key 4. strlen key 5. getset key value 修改键值对   6. getrange ...

  5. Markdown中如何添加特殊符号

    符号 说明 编码 符号 说明 编码 符号 说明 编码 " 双引号 " × 乘号 × ← 向左箭头 ← & AND符号 & ÷ 除号 ÷ ↑ 向上箭头 ↑ <  ...

  6. 控制nginx并发链接数量和客户端请求nginx的速率

    一.控制nginx并发链接数 ngx_http_limit_conn_module这个模块用于限制每个定义的key值的链接数,特别是单IP的链接数. 不是所有的链接数都会被计数,一个符合计数要求的连接 ...

  7. Vue实例和生命周期

    创建一个Vue实例 每个Vue应用都是通过Vue函数创建一个新的Vue实例开始: var vm = new Vue({ //选项 }) 数据与方法 当一个Vue实例被创建时,它向Vue的响应式系统中加 ...

  8. tab key usage

    QA:gvim编辑ascii文本时由于tabkey的default setting 不合适编写Verilog代码(比如一个tab 代表多少空格) ANS: 1.tab 的自动补齐有两种usage自动补 ...

  9. leetcode-15-basic-string

    58. Length of Last Word 解题思路: 从结尾向前搜索,空格之前的就是最后一个词了.写的时候我考虑了尾部有空格的情况.需要注意的是,测试用例中有" "的情况,此 ...

  10. Balanced Lineup（ST）

    描述 For the daily milking, Farmer John's N cows (1 ≤ N ≤ 50,000) always line up in the same order. On ...