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实现图片懒加载的方法及思路,有时我们需要用懒加载,也就是延迟加载图片的方式,来提高网站的亲和力,需要的朋友可以参考下! 一.定义 图片延迟加载也称为懒加载,延迟加 ...
随机推荐
- yii2.0缓存篇之片段缓存
片段缓存指的是缓存页面内容中的某个片段.默认缓存 60秒. return $this->renderPartial("ca"); ...
- HDU-2045 不容易系列之(3)—— LELE的RPG难题 找规律&递推
题目链接:https://cn.vjudge.net/problem/HDU-2045 找规律 代码 #include <cstdio> long long num[51][2]; int ...
- POJ 3539 Elevator(同余类BFS)
题意 有一部电梯,最初停在1层. 电梯有4个按键,上升a,b,c层,回到一层. 求从一层出发.能到达1~h的哪些楼层. (h<=1018,a,b,c<=105) 题解 这种h能大的图论,一 ...
- Linux 文件系统权限
文件权限管理 文件系统上的权限是指文件和目录的权限,权限主要针对三类对象(访问者)定义 owner group other 属主 属组 其它 每个文件对每类访问者都定义了三种 ...
- Mysql学习总结(1)——常用sql语句汇总
一.基础 1.说明:创建数据库 CREATE DATABASE database-name 2.说明:删除数据库 drop database dbname 3.说明:备份sql server --- ...
- 一款很不错的html转xml工具-Html Agility Pack 实现html转Xml
[转]一款很不错的html转xml工具-Html Agility Pack 之前发个一篇关于实现html转成xml的劣作<实现html转Xml>,受到不少网友的关心.该实现方法是借助htm ...
- Looger级别
Logger级别 日志记录器(Logger)是日志处理的核心组件.log4j具有5种正常级别(Level).日志记录器(Logger)的可用级别Level (不包括自定义级别 Level), 以下内容 ...
- 为什么Java里的Arrays.asList不能用add和remove方法?
在平时的开发过程中,我们知道能够将一个Array的对象转化为List.这种操作,我们仅仅要採用Arrays.asList这种方法即可了.笔者前段时间一直用这种方法,有一天,我发现通过Arrays.as ...
- windows linux 双系统默认启动windows 的几种方法
装了双系统后,在开机时总会有想让一个系统默认启动的时候,一般安装完Ubuntu和XP双系统后,开机时默认的是启动Ubuntu系统,可是当想让XP作为默认启动的系统时怎么办呢? 在早期的Ubuntu系统 ...
- vim 脚本之快捷注释
今天初步学习了下vim的脚本知识,并尝试写了一个简单的脚本.当然,这个脚本很简单,使用的方法也很笨拙.不过,这仅仅是一个开始,等以后随着对vim语法的深入了解,会不断优化这个脚本的.先记录下来 &qu ...