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--图片懒加载的更多相关文章

  1. jq图片懒加载

    jQuery图片延迟加载插件jQuery.lazyload,使用延迟加载在可提高网页下载速度.在某些情况下,它也能帮助减轻服务器负载. 使用方法 引用jquery和jquery.lazyload.js ...

  2. JS实现图片懒加载插件

    一.前言 我在前几篇博客的记录中,有说自己在做一个图片懒加载的功能,然后巴拉巴拉的遇到哪些问题,结果做完了也没对懒加载这个功能做一些记录,所以这篇文章主要针对我所实现的思路,以及代码做个记录,实现不佳 ...

  3. 前端实现图片懒加载(lazyload)的两种方式

    在实际的项目开发中,我们通常会遇见这样的场景:一个页面有很多图片,而首屏出现的图片大概就一两张,那么我们还要一次性把所有图片都加载出来吗?显然这是愚蠢的,不仅影响页面渲染速度,还浪费带宽.这也就是们通 ...

  4. jquery实现简单瀑布流布局(续):图片懒加载

    # jquery实现简单瀑布流布局(续):图片懒加载 这篇文章是jquery实现简单瀑布流布局思想的小小扩展.代码基于前作的代码继续完善. 图片懒加载就是符合某些条件时才触发图片的加载.最常见的具体表 ...

  5. webapp图片懒加载实现

    图片懒加载在webapp上非常流行,应用的很广泛. 实现图片懒加载功能:zepto.picLazyLoad.min.js 引入类库 <script src="1.1.3/zepto.m ...

  6. JS图片懒加载

    简介 当页面图片太多时,加载速度就会很慢.尤其是用2G/3G/4G访问页面,不仅页面慢,而且还会用掉很多流量.图片懒加载的原理就是将页面内所有需要加载的图片全部换成一张默认的图片(一般尺寸很小),只有 ...

  7. jQuery.imgLazyLoad图片懒加载组件

    一.前言 当一个页面中请求的图片过多,而且图片太大,页面访问的速度是非常慢的,对用户的体验非常不友好:使用图片懒加载,可以减轻服务器的压力,增加页面的访问量,这里主要是总结一下我自己写的图片懒加载组件 ...

  8. 图片懒加载插件lazyload使用方法

    图片懒加载插件lazyload使用方法 一.如何使用: Lazy Load 依赖于 jQuery.引入文件 <script type="text/javascript" sr ...

  9. js 图片懒加载

    图片懒加载(图片出现在可视区域再加载) 兼容性:兼容目前流行的全部浏览器,包括:兼容到IE6) 使用方法: 引入相应的js文件<script src="js/lazy.js" ...

  10. 基于javascript实现图片懒加载(亲测有效)

    这篇文章主要介绍了javascript实现图片懒加载的方法及思路,有时我们需要用懒加载,也就是延迟加载图片的方式,来提高网站的亲和力,需要的朋友可以参考下! 一.定义 图片延迟加载也称为懒加载,延迟加 ...

随机推荐

  1. affe(8) solver 优化方法

    上文提到,到目前为止,caffe总共提供了六种优化方法: Stochastic Gradient Descent (type: "SGD"), AdaDelta (type: &q ...

  2. Ubuntu(kali)开启mysql远程连接

    Linux 默认关闭mysql的远程连接,编辑 /etc/mysql/my.cnf 文件, 把里面的 bind-address = 127.0.0.1 改成 bind-address = 0.0.0. ...

  3. JS由Number与new Number的区别引发的思考

    在回答园子问题的时候发现了不少新东西,写下来分享一下 == 下面的图就是此篇的概览,另外文章的解释不包括ES6新增的Symbol,话说这货有包装类型,但是不能new... 基于JS是面向对象的,所以我 ...

  4. 洛谷1726 上白泽慧音 tarjan模板

    题目描述 在幻想乡,上白泽慧音是以知识渊博闻名的老师.春雪异变导致人间之里的很多道路都被大雪堵塞,使有的学生不能顺利地到达慧音所在的村庄.因此慧音决定换一个能够聚集最多人数的村庄作为新的教学地点.人间 ...

  5. 赋值、复制构造函数和构造函数 & 异常安全的赋值

    异常安全的赋值 需要注意,复制赋值和复制构造,相兼容. 赋值时候,要带上自检查.

  6. 《AndroidStudio每日一贴》5. 怎样高速查看某个方法/注解的定义?

    操作方法: 使用快捷键 option + space 或 command + y 举个样例: 如以下的样例,我在输入@O的时候会出现代码补全列表,这个时候我想查看列表中项目的定义能够使用快捷键 opt ...

  7. [React Native] Use the SafeAreaView Component in React Native for iPhone X Compatibility

    In this lesson, you will learn how to use the SafeAreaView component to avoid the sensor cluster (th ...

  8. 已知二叉树的中序序列为DBGEAFC,后序序列为DGEBFCA,给出相应的二叉树

    面对这种问题时我们该怎么解决? 今天写数据结构题.发现了一道总是碰见问题的题在这里我写了一种求解方法我自己称它为分层递归求解. 第一步通过观察我们知道后序遍历时最后一个是根节点A 在中序序列中A的左边 ...

  9. vue2.0-transition多个元素

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. Understanding IIS Bindings, Websites, Virtual Directories, and lastly Application Pools

    In a recent meeting, some folks on my team needed some guidance on load testing the Web application ...