jq--图片懒加载
html
1.给图片不给真真意义上的src属性路径,可通过我们自己想要添加时改变它的属性路径即可。
2.要获取浏览器中三种高度。
$(window).height();//屏幕高度
$(window).scrollTop();//滚动条距离顶部的高度
obj.offset().top;//元素距离顶部的高度
3.计算方法:img距离顶部的距离小于屏幕的高度加滚动条距顶部高度时加载图片,给图片设置真真的src属性的路径。
<i class="displayB tea_proDetailPic"><img class="mI_img1" src="img/tea/tea_proDetail1.png" alt=""></i>
<i class="displayB tea_proDetailPic"><img class="mI_img1" src="img/tea/tea_proDetail2.png" alt=""></i>
<i class="displayB tea_proDetailPic tea_picTop"><img class="mI_img1" src="img/tea/tea_proDetail3.png" alt=""></i>
<i class="displayB tea_proDetailPic tea_changePic"><img class="mI_img1" src="img/tea/tea_proDetail4.png" alt=""></i>
<i class="displayB tea_proDetailPic tea_changePic"><img class="mI_img1" src="img/tea/tea_proDetail5.png" alt=""></i>
<i class="displayB tea_proDetailPic tea_changePic"><img class="mI_img1" src="img/tea/tea_proDetail6.png" alt=""></i>
<i class="displayB tea_proDetailPic tea_changePic"><img class="mI_img1" _src="img/tea/tea_proDetail7.png" alt=""></i>
<i class="displayB tea_proDetailPic tea_changePic"><img class="mI_img1" _src="img/tea/tea_proDetail8.png" alt=""></i>
<i class="displayB tea_proDetailPic tea_changePic"><img class="mI_img1" _src="img/tea/tea_proDetail9.png" alt=""></i>
<i class="displayB tea_proDetailPic tea_changePic"><img class="mI_img1" _src="img/tea/tea_proDetail10.png" alt=""></i>
<i class="displayB tea_proDetailPic"><img class="mI_img1" _src="img/tea/tea_proDetail11.png" alt=""></i>
<i class="displayB tea_proDetailPic"><img class="mI_img1" _src="img/tea/tea_proDetail12.png" alt=""></i>
<i class="displayB tea_proDetailPic"><img class="mI_img1" _src="img/tea/tea_proDetail13.png" alt=""></i>
<i class="displayB tea_proDetailPic"><img class="mI_img1" _src="img/tea/tea_proDetail14.png" alt=""></i>
<i class="displayB tea_proDetailPic"><img class="mI_img1" _src="img/tea/tea_proDetail15.png" alt=""></i>
jq
~(function() {
var teaPic = $(".mI_img1");
var wH = $(window).height();//屏幕高度
teaPic.each(function(index,elem) {
$(window).scroll(function() {
var sTH = $(window).scrollTop();//滚动条距离顶部的距离
if( $(".tea_proNav").offset().top < (wH + sTH)- 260 && $(elem).attr("_src") ) {
$(elem).attr('src',$(elem).attr('_src'));
}
});
});
})();
jq--图片懒加载的更多相关文章
- jq图片懒加载
jQuery图片延迟加载插件jQuery.lazyload,使用延迟加载在可提高网页下载速度.在某些情况下,它也能帮助减轻服务器负载. 使用方法 引用jquery和jquery.lazyload.js ...
- JS实现图片懒加载插件
一.前言 我在前几篇博客的记录中,有说自己在做一个图片懒加载的功能,然后巴拉巴拉的遇到哪些问题,结果做完了也没对懒加载这个功能做一些记录,所以这篇文章主要针对我所实现的思路,以及代码做个记录,实现不佳 ...
- 前端实现图片懒加载(lazyload)的两种方式
在实际的项目开发中,我们通常会遇见这样的场景:一个页面有很多图片,而首屏出现的图片大概就一两张,那么我们还要一次性把所有图片都加载出来吗?显然这是愚蠢的,不仅影响页面渲染速度,还浪费带宽.这也就是们通 ...
- jquery实现简单瀑布流布局(续):图片懒加载
# jquery实现简单瀑布流布局(续):图片懒加载 这篇文章是jquery实现简单瀑布流布局思想的小小扩展.代码基于前作的代码继续完善. 图片懒加载就是符合某些条件时才触发图片的加载.最常见的具体表 ...
- webapp图片懒加载实现
图片懒加载在webapp上非常流行,应用的很广泛. 实现图片懒加载功能:zepto.picLazyLoad.min.js 引入类库 <script src="1.1.3/zepto.m ...
- JS图片懒加载
简介 当页面图片太多时,加载速度就会很慢.尤其是用2G/3G/4G访问页面,不仅页面慢,而且还会用掉很多流量.图片懒加载的原理就是将页面内所有需要加载的图片全部换成一张默认的图片(一般尺寸很小),只有 ...
- jQuery.imgLazyLoad图片懒加载组件
一.前言 当一个页面中请求的图片过多,而且图片太大,页面访问的速度是非常慢的,对用户的体验非常不友好:使用图片懒加载,可以减轻服务器的压力,增加页面的访问量,这里主要是总结一下我自己写的图片懒加载组件 ...
- 图片懒加载插件lazyload使用方法
图片懒加载插件lazyload使用方法 一.如何使用: Lazy Load 依赖于 jQuery.引入文件 <script type="text/javascript" sr ...
- js 图片懒加载
图片懒加载(图片出现在可视区域再加载) 兼容性:兼容目前流行的全部浏览器,包括:兼容到IE6) 使用方法: 引入相应的js文件<script src="js/lazy.js" ...
- 基于javascript实现图片懒加载(亲测有效)
这篇文章主要介绍了javascript实现图片懒加载的方法及思路,有时我们需要用懒加载,也就是延迟加载图片的方式,来提高网站的亲和力,需要的朋友可以参考下! 一.定义 图片延迟加载也称为懒加载,延迟加 ...
随机推荐
- Java 调用对象方法的执行过程
弄清调用对象方法的执行过程十分重要.下面是调用过程的详细描述: 1) 编译器查看对象的声明类型和方法名.假设调用x.f(param),且隐式参数x声明为C类的对象.需要注意的是:有可能存在多个名为f, ...
- CodeForcesEducationalRound40-D Fight Against Traffic 最短路
题目链接:http://codeforces.com/contest/954/problem/D 题意 给出n个顶点,m条边,一个起点编号s,一个终点编号t 现准备在这n个顶点中多加一条边,使得st之 ...
- 数据库Flashback学习
最近更新时间:2018/12/18 适用场景 数据库升级.快速构建测试环境.DG中重建主库 前置条件 1. ARCHIVELOG 模式 数据库为 mount 状态下开启,最好指定archive log ...
- js 快捷键设置
function hotkey() { var a=window.event.keyCode; if((a==65)&&(event.ctrlKey)) { alert("你 ...
- 紫书 例题 10-27 UVa 10214(欧拉函数)
只看一个象限简化问题,最后答案乘4+4 象限里面枚举x, 在当前这条固定的平行于y轴的直线中 分成长度为x的一段段.符合题目要求的点gcd(x,y) = 1 那么第一段1<= y <= x ...
- spring的PropertyPlaceholderConfigurer不生效的问题
经常出现这种问题,每次都debug知道原因,但每次都会忘记,所以记录一下. 原因:maven项目中使用了非maven管理的jar包(通过systemPath引用),这些jar包没有放在${projec ...
- ArcGIS api for javascript——加入动态地图
描述 这个示例展示了增加一个按用户缩放或平移服务器每次绘制的地图.这样的地图没有切片的cache并被调用一个动态地图服务图层.ArcGISDynamicMapServiceLayer表示ArcGIS ...
- android 聊天室窗体
public class MainActivity extends Activity { ScrollView scrollView; Button button; LinearLayout layo ...
- 英语音乐---一、Scarborough Fair
英语音乐---一.Scarborough Fair 一.总结 一句话总结:斯卡布罗集市 <斯卡布罗集市>诉说了一个缠绵凄美的爱情故事:一个参军的男青年远离自己相爱的姑娘在战争中不幸遇难,但 ...
- zzulioj--1089--make pair(dfs+模拟)
1809: make pair Time Limit: 1 Sec Memory Limit: 128 MB Submit: 60 Solved: 44 SubmitStatusWeb Board ...