用jquery写的图片懒加载
<%@ 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写的图片懒加载的更多相关文章
- [jQuery插件]手写一个图片懒加载实现
教你做图片懒加载插件 那一年 那一年,我还年轻 刚接手一个ASP.NET MVC 的 web 项目, (C#/jQuery/Bootstrap) 并没有做 web 的经验,没有预留学习时间, (作为项 ...
- jQuery Lazy Load图片懒加载
传送门:官网地址,jQuery Lazy Load v1.7.2下载,Github 使用方法: 1.引用js文件 <script src="jquery.js">< ...
- jQuery.imgLazyLoad图片懒加载组件
一.前言 当一个页面中请求的图片过多,而且图片太大,页面访问的速度是非常慢的,对用户的体验非常不友好:使用图片懒加载,可以减轻服务器的压力,增加页面的访问量,这里主要是总结一下我自己写的图片懒加载组件 ...
- js可视区域图片懒加载
可视区域图片懒加载 实现原理,页面滚动时获取需要懒加载的图片,判断此图片是否在可视区域内,是则设置图片data-src地址为src地址,加载图片. html下载地址 <!DOCTYPE html ...
- jquery实现简单瀑布流布局(续):图片懒加载
# jquery实现简单瀑布流布局(续):图片懒加载 这篇文章是jquery实现简单瀑布流布局思想的小小扩展.代码基于前作的代码继续完善. 图片懒加载就是符合某些条件时才触发图片的加载.最常见的具体表 ...
- jquery图片懒加载效果
1.要引入jquery 2.要引入underscore.js <!DOCTYPE html> <html lang="en"> <head> & ...
- jQuery图片懒加载插件jquery.lazyload.js使用实例注意事项说明
jQuery图片懒加载插件jquery.lazyload.js使用实例注意事项说明 jquery.lazyload.js是一个用JavaScript编写的jQuery插件.它可以延迟加载长页面中的图片 ...
- 插件:★★★ !!!图片懒加载 lazyload.js 、 jquery.scrollLoading.js
插件:图片懒加载 jquery.lazyload.js 2016-3-31 插件说明:http://www.w3cways.com/1765.html (小插件,好用) 下载地址: https://r ...
- 使用jQuery实现图片懒加载原理
原文:https://www.liaoxuefeng.com/article/00151045553343934ba3bb4ed684623b1bf00488231d88d000 在网页中,常常需要用 ...
随机推荐
- iOS开发之WIFI,3G/4G两种网络同时使用技巧
最近遇到一个比较奇葩的需求:App与硬件通过WiFi LAN通信, 同时App需要与服务器通过3G/4G WAN通信,如下图: 众所周知,手机同时打开WiFi和3G时候,会优先走WiFi.这个该如何实 ...
- SVN:The working copy is locked due to a previous error (二)
之前也碰到过这种问题,但是根本问题不同,解决方案不同. 传送门:SVN:The working copy is locked due to a previous error (二) 本次错误如图: 解 ...
- init0-6(启动级别)
一. init是Linux系统操作中不可缺少的程序之一. 所谓的init进程,它是一个由内核启动的用户级进程. 内核自行启动(已经被载入内存,开始运行,并已初始化所有的设备驱动程序和数据结构等)之后, ...
- yield关键字有什么作用
所属网站分类: python基础 > 语句 作者:goodbody 链接: http://www.pythonheidong.com/blog/article/10/ 来源:python黑洞网 ...
- gdb调试时查看内存
x/<n/f/u> <addr> n.f.u是可选的参数,<addr>表示一个内存地址 1) n 是一个正整数,表示显示内存的长度,也就是说从当前地址向后显示几个地 ...
- Python学习-day4
学习装饰器,首先听haifeng老师讲解了一下准备知识. 1.函数即变量 2.高阶函数+嵌套函数==>装饰器 装饰器的作用是在,1)不改变源代码,2)不改变原函数的调用方式的前提下为函数增加新的 ...
- EM算法简易推导
EM算法推导 网上和书上有关于EM算法的推导,都比较复杂,不便于记忆,这里给出一个更加简短的推导,用于备忘. 在不包含隐变量的情况下,我们求最大似然的时候只需要进行求导使导函数等于0,求出参数即可.但 ...
- April Fools Contest 2018
这个比赛不正经,但是我可以一本正经的写代码啊 A. Quirky Quantifiers time limit per test 2 seconds memory limit per test 64 ...
- C语言总结(3)
1.字符输入函数getchar 输入一个字符 char ch; ch=getchai(); 字符输出函数putchar 输出一个字符 putchar(输出参数): 2.调用scanf和printf输入 ...
- 算法golang篇
1.slice反转,偏移 func reverse(s []int) { , len(s) - ; i < j; i, j = i+, j- { s[i], s[j] = s[j], s[i] ...