1、图片懒加载
将图片src先赋值为一张默认图片,当用户滚动滚动条到可视区域图片的时候,再去加载后续真正的图片
如果用户只对第一张图片感兴趣,那剩余的图片请求就可以节省了。
懒加载(LazyLoad)是前端优化的一种有效方式,极大的提升用户体验。图片一直是页面加载的流浪大户,现在一张图片几兆已经是很正常的事,远远大于代码的大小。倘若一次ajax请求10张图片的地址,一次性把10张图片都加载出来,肯定是不合理的。
懒加载实现的原理
先将img标签中的src链接设置为空,将真正的图片链接放在自定义属性(data-original),当js监听到图片元素进入到可视窗口的时候,将自定义属性中的地址存储到src中,达到懒加载的效果。
需要注意点:
- 屏幕可视区域的高度
- 每张图片在文档中的高度
- 图片符合要求进行加载时,将图片地址赋值给属性 src
- 对屏幕滚动事件进行监控
- 首次进入网页未滑动屏幕时要显示的图片
懒加载中涉及的属性
1 、document.documentElement.clientHeight; //表示浏览器可见区域高度:
document.body.clientHeight //是整个页面内容的高度,而非浏览器可见区域的高度
2 、document.documentElement.scrollTop; //滚动条 已滚动的高度:
chrome 中 document.body.scrollTop //滚动条 滚过的高度
那么要得到滚动条的高度:有一个技巧:
var scrollTop=document.body.scrollTop || document.documentElement.scrollTop;
这两个值总会有一个恒为0,所以不用担心会对真正的scrollTop造成影响。一点小技巧,但很实用。
3、 offsetTop、offsetLeft
obj.offsetTop 指 obj 距离上方或上层控件的位置,整型,单位像素。
obj.offsetLeft 指 obj 距离左方或上层控件的位置,整型,单位像素。
obj.offsetWidth 指 obj 控件自身的宽度,整型,单位像素。
obj.offsetHeight 指 obj 控件自身的高度,整型,单位像素。
offsetParent 不同于parentNode ,offsetParent 返回的是在结构层次中与这个元素最近的position为absolute\relative\static的元素或者body
具体滚动时涉及的属性值,请参考https://blog.csdn.net/zh_rey/article/details/78967174非常详细
或者用jquery的插件:jQuery.lazyload();
<!-- 将真实图片地址写在 data-original 属性中,而 src 属性中的图片换成占位符的图片(例如 1x1 像素的灰色图片或者 loading 的 gif 图片), 添加 class="lazy" 用于区别哪些图片需要延时加载,当然你也可以换成别的关键词,修改的同时记得修改调用时的 jQuery 选择器 添加 width 和 height 属性有助于在图片未加载时占满所需要的空间 -->
40 <script src="jquery-3.2.1.slim.js"></script>
41 <script>
42 var wHeight=$(window).height(); //获取屏幕可视高度
43 $('img').each(function () { //对图片进行循环
44 var ownHeight=$(this).offset().top; //获取当前图片在文档中的位置
45 if(ownHeight<=wHeight){ //如果当前图片位置在屏幕可视范围之内加载此图片
46 $(this).attr('src',$(this).attr('data-original'));
47 }
48 });
49
50 $(window).on('scroll',function(){ //添加屏幕滚动事件
51 $('img').each(function () {
52 var hasSorollTop=$(window).scrollTop(); //获取屏幕已滚动高度
53 var ownHeight=$(this).offset().top;
54 if(ownHeight<=(hasSorollTop+wHeight+500)){
55 //当图片在屏幕滚动时,距离可视区域500像素时加载此图片,
56 // 以保证查看此图时,下面的一张以提前加载完成,设置为500是因为已经将图片设置为300px了。
57 $(this).attr('src',$(this).attr('data-original'));
58 }
59 });
60 });
61 </script>
注意事项:
需要真正实现图片延迟加载,必须将真实图片地址写在 data-original 属性中。若 src 与 data-original 相同,则只是一个特效而已,并不达到延迟加载的功能。
引申:data-url替换a标签
跳转用div加h5的自定义属性data-*,代替a标签:a标签有种种不确定性,比如在各种浏览器的表现形式不统一,而且鼠标hover的时候页面下方会有链接,显得很low。
而div+自定义属性,在js中获取链接,通过$('.new').attr('url')获取地址,然后把链接 window.href,这样做的目的是不暴露地址,有一些地址是隐藏的,在js处理可以有一个保护性,在html里面就直接能看到,还有在js里可以对http和https做处理,更加便利,window.location.protocol,这样按页面头信息,跳转,,还有就是按域名,比如你是测试机器,然后你在html写错了其实灵活性太不好。
data属性可以使用dataset拿到,是一个对象
使用
dataset
操作data
要比使用getAttribute和setAttribute
速度稍微慢些,使用dataset
不能提高代码的性能,但是对于简洁代码,提高代码的可读性和可维护性是很有帮助的原文:https://blog.csdn.net/weixin_38026561/article/details/80606518
引申:
定义和用法
data-* 属性用于存储页面或应用程序的私有自定义数据。
data-* 属性赋予我们在所有 HTML 元素上嵌入自定义 data 属性的能力。
存储的(自定义)数据能够被页面的 JavaScript 中利用,以创建更好的用户体验
(不进行 Ajax 调用或服务器端数据库查询)。data-* 属性包括两部分:
属性名不应该包含任何大写字母,并且在前缀 "data-" 之后必须有至少一个字符
属性值可以是任意字符串简单来说就是存储一些简单信息,然后可以通过js拿到这些信息,
像你说的data-url和data-href估计就是存储的真正的url和href,
可以通过js的element.dataset.url或JQ的data('url')拿到,然后进行相应操作
原文链接:https://blog.csdn.net/longge9999/article/details/84812690
window.location.href 传中文乱码
本文链接:https://blog.csdn.net/qq_32902473/article/details/74942496
window.location.href url含中文服务器收到乱码问题解决
中文乱码问题
window.location.href url含中文服务器收到乱码问题解决
(1).页面中先对中文进行编码。
如:window.location.href = url+"&groupName=" + encodeURI(encodeURI(groupName)) ;
注意,页面部分需要编码两次。
(2).在服务端进行解码。
groupName= java.net.URLDecoder.decode(groupName, "UTF-8");原文链接:https://blog.csdn.net/qq_32902473/article/details/74942496
a标签中href=""的几种用法
本文链接:https://blog.csdn.net/u010297791/article/details/52784879
众所周知,a标签的最重要功能是实现超链接和锚点。而且,大多数人认为a标签最重要的作用是实现超链接,今天我刚好碰到a标签的一种写法<a href="javascript:;"></a>,所以就来整理下a标签中href的几种用法。
一、Js的几种调用方法(参考总结的)
1、a href="javascript:js_method();"
这是常用的方法,但是这种方法在传递this等参数的时候很容易出问题,而且javascript:协议作为a的href属性的时候不仅会导致不必要的触发window.onbeforeunload事件,在IE里面更会使gif动画图片停止播放。W3C标准不推荐在href里面执行javascript语句
2、 a href="javascript:void(0);" οnclick="js_method()"
这种方法是很多网站最常用的方法,也是最周全的方法,onclick方法负责执行js函数,而void是一个操作符,void(0)返回undefined,地址不发生跳转。而且这种方法不会像第一种方法一样直接将js方法暴露在浏览器的状态栏。
3、a href="javascript:;" οnclick="js_method()"
这种方法跟跟2种类似,区别只是执行了一条空的js代码。
4、a href="#" οnclick="js_method()"
这种方法也是网上很常见的代码,#是标签内置的一个方法,代表top的作用。所以用这种方法点击后网页后返回到页面的最顶端。
5、a href="#" οnclick="js_method();return false;"
这种方法点击执行了js函数后return false,页面不发生跳转,执行后还是在页面的当前位置。
综合上述,在a中调用js函数最适当的方法推荐使用:
<a href="javascript:void(0);" οnclick="js_method()"></a>
<a href="javascript:;" οnclick="js_method()"></a>
<a href="#" οnclick="js_method();return false;"></a>
二、href="#"的作用
a中href="#"表示回到最顶部。如果当前页面中需要滚动的话,那么用这种方式就可以直接回到顶部。比如有些网站会在右下角制作一个图标按钮,回到顶部,那么此时可以考虑用这种最简单的方式实现。
<span style="font-size:14px;"><a href="#">回到最顶端</a></span>
三、href="URL"的作用
1、URL为绝对URL
此时指向另一个站点,比如href="http://write.blog.csdn.net",那么点击时就会直接跳转到这个链接的页面。
2、URL为相对URL
此时指向站点内的某个文件,比如href="/test.doc",那么点击时就会直接下载文件。
3、锚 URL
此时指向页面中的锚,比如href="#top",那么点击时就会到当前页面中id="top"的这个锚点,实现当前页面的所谓跳转。用的最多就是在可滚动页面中,添加菜单,可以直接回到页面中的某个部分的内容。
即所有的三种代码样例:
<a href="http://baidu.com">超链接</a>
<a href="#">回到最顶端</a>
<a href="css/css1.css">文件链接</a>
2、图片预加载
实现图片预加载的几种方式
本文链接:https://blog.csdn.net/baidu_24024601/article/details/76167082
感觉自己好久没有写博客了,可能自己变懒了。不知道为什么最近有点迷茫,不知道是该去学一下新东西还是该去看一下具有深度的东西。新的技术需要关注,但是我要去研究一下jquery的源码,这个东西很早就想去看,无奈时间安排不过来。学了新的东西,没有机会去实践,很快就忘记了,但是我们还是要保持一种不断吸收新知识的姿态。讲了这么多废话,好了,开始今天的话题。实现图片预加载的几种方式。
在开发的过程,我们经常会遇到这样的要求,当鼠标hover上去的时候,更改菜单的背景。如果没有进行图片预加载的话,会出现闪烁。那么拥有1px的眼睛的设计师们不会放过你的。为什么会出现这张情况?因为hover的时候,图片才会去加载。那么我们现在来解决这个问题。
首先我们要知道一点:如果图片在使用之前就已经请求过了,那么再次使用的时候,就不会再去请求(ps:图片路径一样)。下面讲实现方式
1.使用纯的css进行图片预加载
body:after { content: ""; display: block; position: absolute; background: url("../image/manage/help/help_item2_01.png?v=201707241359") no-repeat -10000px -1000px,url("../image/manage/help/help_item2_02.png?v=201707241359") no-repeat -10000px -1000px,url("../image/manage/help/help_item2_03.png?v=201707241359") no-repeat -10000px -1000px,url("../image/manage/help/help_item2_04.png?v=201707241359") no-repeat -10000px -1000px,url("../image/manage/help/help_item2_05.png?v=201707241359") no-repeat -10000px -1000px,url("../image/manage/help/help_item2_06.png?v=201707241359") no-repeat -10000px -1000px,url("../image/manage/help/help_item2_07.png?v=201707241359") no-repeat -10000px -1000px,url("../image/manage/help/help_item2_01.png?v=201707241359") no-repeat -10000px -1000px; width: 0; height: 0 }
原理是加载了该图片,但是我们不显示在可视范围内。这种方式极其简单。但是也有一个致命的弱点,图片跟随文档一同加载,有时候我们为了提高文档的加载速度,那么这种方式方式就不适合了。
2.使用纯javascript进行图片预加载
//存放图片路径的数组 var imgSrcArr = [ 'imgsrc1', 'imgsrc2', 'imgsrc3', 'imgsrc4' ]; var imgWrap = []; function preloadImg(arr) { for(var i =0; i< arr.length ;i++) { imgWrap[i] = new Image(); imgWrap[i].src = arr[i]; } } preloadImg(imgSrcArr); //或者延迟的文档加载完毕在加载图片 $(function () { preloadImg(imgSrcArr); })
3.使用css+js方式进行图片预加载
.preload-img:after{ content:"", background: url("../image/manage/help/help_item2_01.png?v=201707241359") no-repeat -10000px -1000px,url("../image/manage/help/help_item2_02.png?v=201707241359") no-repeat -10000px -1000px,url("../image/manage/help/help_item2_03.png?v=201707241359") no-repeat -10000px -1000px,url("../image/manage/help/help_item2_04.png?v=201707241359") no-repeat -10000px -1000px,url("../image/manage/help/help_item2_05.png?v=201707241359") no-repeat -10000px -1000px,url("../image/manage/help/help_item2_06.png?v=201707241359") no-repeat -10000px -1000px,url("../image/manage/help/help_item2_07.png?v=201707241359") no-repeat -10000px -1000px,url("../image/manage/help/help_item2_01.png?v=201707241359") no-repeat -10000px -1000px; } /* 比如我们写了上面的这样一个类,但是页面中没有用到,我们在文档加载完毕之后,给某个元素添加该类 */ $(function(){ $("#target").addClass("preload-img") })
4.使用ajax方式进行图片预加载
$(function(){ $.get('图片的路径'); }) /* 当然我们也可以写成一个函数,这里我就不演示了 */
3、使用雪碧图进行定位(CSS sprites进行定位)
什么是雪碧图?
雪碧图也叫CSS精灵, 是一种CSS图像合成技术;
通俗来说:将小图标合并在一起之后的图片称作雪碧图,每个小图标的使用配合background-position来获取。如下:
如上雪碧图,background-position使用定位如下X和Y轴,注:原点0,0 位置, 之后X和Y轴均为负值,定位到图片左上侧起点后根据width和height截取小图标
什么图片可以拼成雪碧图?
1. 静态图片,不随用户信息的变化而变化
2. 小图片,图片容量比较小(一些大图不建议拼成雪碧图)
3. 加载量比较大
使用雪碧图的优缺点?
1.优点
1、减少网页的http请求,提高页面的性能;
2、减少图片的字节,曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和。
3、解决了网页设计师在图片命名上的困扰,只需对一张集合的图片上命名就可以了,不需要对每一个小元素进行命名,从而提高了网页的制作效率。
4、更换风格方便,只需要在一张或少张图片上修改图片的颜色或样式,整个网页的风格就可以改变。维护起来更加方便。2.缺点
1、在图片合并的时候,你要把多张图片有序的合理的合并成一张图片,还要留好足够的空间,防止板块内出现不必要的背景;在宽屏,高分辨率的屏幕下的自适应页面,图片如果不够宽,容易出现背景断裂;
2、至于可维护性差,每次图片删除或添加内容,显得稍微繁琐,加大工作量。而且算图片的位置(尤其是这种上千px的图)也是一件颇为不爽的事情。
3、由于图片的位置需要固定为某个绝对数值,这就失去了诸如center之类的灵活性。
4、在一些需要非单向的平铺背景和需要网页缩放的情况下,CSS Sprites并不合适。YUI的解决方式是,加大图片之间的距离,这样可以保持有限度的缩放。3.CSS Sprites图片切割术(技巧)
1、CSS Sprites图片顺序合图片由上至下、左至右添加。而background-position一般采用数字组合形式定位,这样能减少维护带来的不必要麻烦。
2、不建议CSS Sprites图片中保持一定的间距,因为文件size增大而增加文件体积。
3、CSS Sprites图片中把颜色较近或相同的组合在一起可以降低颜色数,因为少色数的图片文件体积会相对的小。
4、size相同的CSS Sprites图片中留有较大空隙,某程度上多数情况会增大了体积,所以CSS Sprites的图片不要有空隙。
5、在size相同的CSS Sprites图片中,垂直排列的图片会比水平排列的文件体积要大。
6、在CSS Sprites图片中,水平排列的图片会比垂直排列的文件体积要大。
7、图片对等合并:应用CSS Sprites图片时,适当地把对等相同的图像合并,以节省空间及减少体积。
8、区分开不需要合并的图像:如当前用户确定只显示一种状态或一个级别时,不必要把其他的级别或状态的图片合并。
9、黄金切割位:在CSS Sprites图片的最右或左边为最灵活动位置最适宜摆放文本前的icon,因此不会受到其它CSS Sprites图片干预,也不需要预留一定的行宽。background-position和雪碧图(CSS Sprites)用法
本文链接:https://blog.csdn.net/bingkingboy/article/details/51059209
background-position属性使用频率非常高,大量的网站为了减少http请求数,会将大量的图片图片合成一张雪碧图(Sprite)来使用。雪碧图的使用就是通过控制background-position属性值来确定图片呈现的位置,不得不说它的作用非常重要,当然除了在使用雪碧图的场景外,别的某些场景也常常会使用到这个属性,这次就总结下它的用法。
还是那句话,工欲善其事必先利其器,只有真正的了解background-position的特性才能在需要的场景更好的运用它。
在h5页面中用background-size进行雪碧图的设置。
background-position的定义
background-position 属性设置背景图像的起始位置。
这个属性设置背景原图像(由 background-image 定义)的位置,背景图像如果要重复,将从这一点开始。
提示:
background-position属性设置背景原图像(由 background-image 定义)的位置,意味着使用这个属性的前提是必须设置背景原图像background-image。background-position的属性值
background-position有两个属性值, background-position:x | y,用法上可以对其一个属性单独使用 background-position-x 和 background-position-y。
background-position属性值有三种情况
提示:
background-position两个属性值可以混用,例如:方向值和数值、数值和百分比,并非x轴和y轴需要设置为同一类型的属性值,这点也正是说明了background-position属性可以衍生单独设置background-position-x 或 background-position-y。background-position属性值之神奇的百分比
我们都知道background-position 属性的作用:设置背景图像的起始位置。这里的起始位置是相对于自身容器而言,如果属性值为数值,大家可能很好理解,例如:background-position:100px 50px 这个属性值意味着图片在距离自身容器x轴为100px、y轴为50px的位置作为图片显示的起点位置。
然而使用百分比来设置属性值,是以自身容器的长宽 减去 图片的长宽 乘以 百分比 所得的数值来确定图片的起始位置。
公式: (容器自身的宽度/高度 - 图片自身的宽度/高度) x 百分比
例如:background-position:50% 50%
提示:
- background-position属性值如果是数值,那么指相对于容器自身数值的距离作为起始位置;如果是百分比或者是方向,那么指的是相对于容器自身(容器自身的宽度/高度 - 图片自身的宽度/高度) x 百分比 所得的数值作为起始位置。
- 如果不设置background-position属性值,那么默认起始位置为background-position:0% 0%。
- 方向值和百分比的计算方式是一样的,它们可以相互转换,left:0%,right:100%,center:50%。
- 如果background-position属性值只设置一个,那么另一个默认为center。
雪碧图
CSS雪碧图即CSS Sprites,也有人叫它CSS精灵,是一种CSS图像合并技术,该方法是将小图标和背景图像合并到一张图片上,然后利用CSS的背景定位来显示需要显示的图片部分。
上面这张图片是由多个小图片合成的,前端成它为CSS雪碧图。
background-position属性在雪碧图中的用法
了解了background-position属性的用法,那么对于如何使用雪碧图的学习就相对简单了很多。使用雪碧图之前,我们需要知道雪碧图中各个图标的位置。
从上面的图片不难看出雪碧图中各个小图标(icon)在整张雪碧图的起始位置,例如第一个图标(裙子)在雪碧图的起始位置为 x:0,y:0,第二个图标(鞋子)在雪碧图的起始位置为 x:0,y:50px,第三个图标(足球)在雪碧图的起始位置为x:0,y:100px,依次类推可以得出各个图片相对于雪碧图的起始位置。
以上面的雪碧图为例(实际雪碧图中各个小图片的起始位置和上面的展示图不同)用一个Demo来阐述它的使用方法。
HTML
<div class="box"> <span class="icon1"></span> <span class="icon2"></span> <span class="icon3"></span> <span class="icon4"></span> </div>
CSS
<style> .box{width: 600px; height:300px; border: 3px solid #ccc; background-color: #8064A2; } span{display: inline-block; width: 25px; height: 25px; border: 3px solid #ccc; background-image: url(css/img/sidebar.png); background-repeat: no-repeat; margin: 5px;} .icon1{background-position: 0 0;} .icon2{background-position: -40px 0;} .icon3{background-position: 0 -25px;} .icon4{background-position: -40px -25px;} </style>
为什么使用雪碧图时background-position属性值为负数
上面的例子已经阐述了如何使用雪碧图,只不过初学者可能会对雪碧图中的background-position属性值为负值有所疑惑。这个问题其实不难回答,如果细心的人应该很早就发现了使用负数的根源所在。这边用上面的Demo为例,来分析这个问题。上面的span标签是一个25px长宽的容器,在使用背景图时,背景图的初始位置会从容器的左上角的开始铺满整个容器,然而容器的大小限制了背景图呈现的大小,超出容器部分被隐藏起来。假如设置background-position: 0 0 那么意味着,背景图相对于容器(span标签)x轴=0;y轴=0的位置作为背景图的起始位置来显示图片。所以如果需要在容器中显示第二个图标,意味着雪碧图x轴方向要左移动,左移动雪碧图即它的值会设置为负数,同理y轴方向也一样。
CSS调整雪碧图的大小
1、通过transform: scale(0.5);来缩放,但在本身有过渡或动画时,刷新页面会有卡顿拉伸现象!不建议这样做!
2、直接调整雪碧图background-size大小
例如,雪碧图规格140*840,但是我们只需要width:42px、height:20px(只是容器的宽度,不是直接设置雪碧图的宽高哦!相当于我们人在房子里,只能看到窗户开放给我们的景象,其他的是看不到的,在这里具体就是,只能看到雪碧图140px*840px的冰山一角),这时,我们需要写以下样式:
width: 42px;
height: 20px;
background-image: url('./icon.png'); // 请注意!!!background-position必须在background-image之后写才能生效
background-size: 42px 252px;(X、Y方向),这是雪碧图中,我们需要的实际背景图片大小,他是雪碧图规格的除数,140*840他们同时除以10得到14*84, 然后同时*3得到42*252 // 注意 必须保持与原始规格140*840的比例!为什么一定要是雪碧图规格大小的倍数呢?因为这样是为了等比例缩放雪碧图,防止拉伸,因为雪碧图可能原本大小是UI设计师要求的几倍大,这个时候就需要缩小了不是? 具体多少倍数,看UI设计师的具体要求
background-position: 0 -147px; // 这是雪碧图中,我们需要的图标的位置坐标。
4、:将图片压缩成base64格式来节约请求
https://www.cnblogs.com/final-elysion/p/6092675.html
5、将图片缩放压成缩略图,进行显示。
在处理图片时,一些图片加载很慢,把图片缩放压成缩略图,但是图片模糊不清,可以采用下面两种方法实现加载图片的高清度,也能提高图片加载速度,提高用户体验
1、先让客户端加载像素小的缩略图:< img src="缩略图.jpg" name="pic" width="800" height="600" id="news" />
然后用js处理:var img = new Image();//新建一个图片对象
img.src = "原图.jpg"; //最终显示的大图
img.onload = function() {
document.getElementById('news').src = this.src;
}
实现预加载缩略图,最终显示像素高的原图,这样做的好处是避免用户长时间等待图片而跳出
2、用ps将图片像素压缩,实现图片加载高像素。
原文链接:https://blog.csdn.net/licuicui5201/article/details/82776870