img 的data-src 属性及懒加载
一、什么是图片懒加载
当访问一个页面的时候,先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径(这样就只需请求一次),当图片出现在浏览器的可视区域内时,才设置图片真正的路径,让图片显示出来。这就是图片懒加载。
通俗一点:
1、就是创建一个自定义属性data-src存放真正需要显示的图片路径,而img自带的src放一张大小为1 * 1px的图片路径。
2、当页面滚动直至此图片出现在可视区域时,用js取到该图片的data-src的值赋给src。
ps:自定义属性可以取任何名字
HTML:

CSS:
<style>
.container {
max-width: 800px;
margin: 0 auto;
}
.container:after{
content: '';
display: block;
clear: both;
}
.container img {
float: left;
width: 50%;
}
h1{
clear: both;
}
</style>
二、需要了解的问题
1、如何加载图片?
2、如何判断一个元素出现在视野中?
- 如何加载图片
只需要把data-src中的地址放到src的里面就好了
代码:
function loadImg($img){
//.attr(值)
//.attr(属性名称,值)
$img.attr('src', $img.attr('data-src')) //把data-src的值 赋值给src
$img.attr('data-isLoaded', 1) //已加载过的图片做标记
}
结果如下:

- 如何判断一个元素出现在视野中?
元素相对顶点的距离(文字) <= 窗口高度 + 滚动的距离
代码:
function isShow($node){
return $node.offset().top <= $(window).height() + $(window).scrollTop()
}
如图:


js:
start()
$(window).on('scroll', function(){
start()
}) function start(){
//.not('[data-isLoaded]')选中已加载的图片不需要重新加载
$('.container img').not('[data-isLoaded]').each(function(){
var $node = $(this)
if( isShow($node) ){
loadImg($node)
}
})
} //判断一个元素是不是出现在窗口(视野)
function isShow($node){
return $node.offset().top <= $(window).height() + $(window).scrollTop()
}
//加载图片
function loadImg($img){
//.attr(值)
//.attr(属性名称,值)
$img.attr('src', $img.attr('data-src')) //把data-src的值 赋值给src
$img.attr('data-isLoaded', 1)//已加载的图片做标记
} </script>
注:记得引用jQuery,元素浮动,必须清除。
img 的data-src 属性及懒加载的更多相关文章
- 计算型属性 vs 懒加载
只实现 getter 方法的属性被称为计算型属性,等同于 OC 中的 ReadOnly 属性 计算型属性本身不占用内存空间 不可以给计算型属性设置数值 计算型属性可以使用以下代码简写 var titl ...
- Spring - bean的lazy-init属性(懒加载)
默认情况下,容器初始化的时候便会把bean实例化,通常这样做可以让一些配置或者bean实例化的异常在容器启动的时候就发现,而不是在N久之后.但有时候,我们希望某个可能不会用到但又不是100%不用的be ...
- Hibernate Lazy属性与懒加载 整理
lazy概念:要用到的时候,再去加载,对于关联的集合来说,只有当访问到的时候,才去加载它所关联的集合,比如一个user对应很多权限,只有当user.getRights()的时候,才发出select r ...
- swift的计算属性和懒加载
计算属性每次都重新计算. 懒加载只计算一次. 可以借助backing store将计算属性转化为懒加载属性. 计算属性实质上退化为函数调用. 计算属性的标示是get.set.
- hibernate--lazy(懒加载)属性
关联映射文件中<class>标签中的lazy(懒加载)属性 Lazy(懒加载):只有在正真使用该对象时,才会创建这个对象 Hibernate中的lazy(懒加载):只有我们在正真使用时,它 ...
- js 图片懒加载
图片懒加载(图片出现在可视区域再加载) 兼容性:兼容目前流行的全部浏览器,包括:兼容到IE6) 使用方法: 引入相应的js文件<script src="js/lazy.js" ...
- angular配置懒加载路由的思路
前言 本人记性不好,对于别人很容易记住的事情,我愣是记不住,所以还是靠烂笔头来帮我长长记性. 参考文章:https://blog.csdn.net/xif3681/article/details/84 ...
- 懒加载 字典转模型 自定义cell
1 懒加载: 1> 什么是懒加载? 懒加载又称为延时加载,即在系统调用的时候加载,如果系统不调用则不会加载.所谓的懒加载其实就是重写其 get 方法. 2> 特点:在使用懒加载的时候要 ...
- JPA数据懒加载LAZY配合事务@Transactional使用(三)
上篇博文<JPA数据懒加载LAZY和实时加载EAGER(二)>讲到,如果使用懒加载来调用关联数据,必须要保证主查询session(数据库连接会话)的生命周期没有结束,否则,你是无法抽取到数 ...
随机推荐
- 单细胞分析实录(9): 展示marker基因的4种图形(二)
在上一篇中,我已经讲解了展示marker基因的前两种图形,分别是tsne/umap图.热图,感兴趣的读者可以回顾一下.这一节我们继续学习堆叠小提琴图和气泡图. 3. 堆叠小提琴图展示marker基因 ...
- MySQL 异常有这一篇就够了!
摘要:在本文中,总结了开发过程中最为常见的几种 MySQL 抛出的异常以及如何解决,包括高版本驱动的问题.时区配置问题.SSL 连接问题等,是一篇经验总结贴. 前言 在本文中,总结了开发过程中最为常见 ...
- 剑指 Offer 04. 二维数组中的查找 (思维)
剑指 Offer 04. 二维数组中的查找 题目链接 本题的解法是从矩阵的右上角开始寻找目标值. 根据矩阵的元素分布特性, 当目标值大于当前位置的值时将row行号++,因为此时目标值一定位于当前行的下 ...
- 2020年12月-第02阶段-前端基础-CSS字体样式
CSS字体样式属性调试工具 应用 使用css字体样式完成对字体的设置 使用css外观属性给页面元素添加样式 1.font字体 1.1 font-size:大小 作用: font-size属性用于设置字 ...
- 基于es实现一个简单的搜索引擎
一.什么是es Elasticsearch是一个基于ApacheLucene(TM)的开源搜索引擎.无论在开源还是专有领域,Lucene可以被认为是迄今为止最先进.性能最好的.功能最全的搜索引擎库.但 ...
- FreeBSD jail 折腾记(一)
创建jail目录 mkdir -p /usr/jail/ 放入基本系统 方案一 make buildworld #编译基本系统 make installworld DESTDIR=/usr/jail/ ...
- vue 折线柱状图
需求:折线柱状图实现,显示不同提示,颜色,标记等等. 图例: 实现: <template> <div class="transaction-barline"> ...
- vue 弹窗禁止底层滚动
原因:底层视图高度超出百分百,加入弹窗后再苹果浏览器隐藏上下栏的情况下遮罩层没有完全遮住底层. 处理:打开弹窗后禁止底层滚动调用stop事件,关闭则开启底层滚动调用move事件. let mo=fun ...
- 你想知道的 std::vector::push_back 和 std::vector::emplace_back
引言 C++ 11 后,标准库容器 std::vector 包含了成员函数 emplace 和 emplace_back.emplace 在容器指定位置插入元素,emplace_back 在容器末尾添 ...
- 死磕生菜 -- lettuce 间歇性发生 RedisCommandTimeoutException 的深层原理及解决方案
0x00 起源 项目的一些微服务集成了 Spring Data Redis,而底层的 Redis 客户端是 lettuce,这也是默认的客户端.微服务在某些环境中运行很正常,但在另一些环境中运行就会间 ...