<%@ 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. Unity3d 中键值监听方法

    unity3d的api中没有负责监听键值的方法,不过unity的input类是通过c#类获取各类监听事件,所以我们可以通过c#类监听,方法如下: void OnGUI() { Event e = Ev ...

  2. ios下通过webservice获取数据

    经历了两天的摸索,终于成功获取了数据,因为公司要做一个停车入库的信息查询,所以需要访问webservice的接口,由于没有接触过webservice,所以第一天就是各种搜索资料,类库,各种尝试,甚至是 ...

  3. 【线段树分治 01背包】loj#6515. 「雅礼集训 2018 Day10」贪玩蓝月

    考试时候怎么就是没想到线段树分治呢? 题目描述 <贪玩蓝月>是目前最火爆的网页游戏.在游戏中每个角色都有若干装备,每件装备有一个特征值 $w$ 和一个战斗力 $v$ .在每种特定的情况下, ...

  4. LeetCode945-使数组唯一的最小增量

    问题:使数组唯一的最小增量 给定整数数组 A,每次 move 操作将会选择任意 A[i],并将其递增 1. 返回使 A 中的每个值都是唯一的最少操作次数. 示例 1: 输入:[1,2,2] 输出:1 ...

  5. vue_music:封装scroll.vue组件

    在项目中经常用到滚动,结合Better-scroll封装了sroll.vue组件参考链接:https://ustbhuangyi.github.io...http://www.imooc.com/ar ...

  6. jCarousel,jQuery下的滚动切换传送插件

    转自:http://www.zhangxinxu.com/jq/jcarousel_zh/#Examples 介绍 jCarousel是一款 jQuery 插件, 用来控制水平或垂直排列的列表项. 这 ...

  7. 补之前 如何改变jupyter打开文件的路径

    目录 如何改变jupyter打开文件的路径 第一种方法: 第二种方法 第三种方法 如何改变jupyter打开文件的路径 当我们直接打开jupyter时,直接加载的是我们的C盘文件 现在我们想打开其他盘 ...

  8. w3resource_MySQL练习: Aggregate_functions

    w3resource_MySQL练习题:Aggregate_functions   1. Write a query to list the number of jobs available in t ...

  9. freertos知识点笔记——队列、二值信号量、计数信号量

    队列1.队列queue通常用于任务之间的通信,一个任务写缓存,另一个任务读缓存.队列还会有等待时间,2.阻塞超时时间.如果在发送时队列已满,这个时间即是任务处于阻塞态等待队列空间有效的最长等待时间.如 ...

  10. Linux实现内容分发的主备模式的智能DNS

    BIND实现智能DNS的原理是通过view的方式,首先判断客户请求的来源,然后返回不同的IP 规划:为za.com域进行智能解析 分2个网段,192.168.1.0/24网段的请求解析到192.168 ...