通过js来实现页面隐藏图片不加载，提高访问速度

今天本来准备说ListView这些的，但是我今天在优化网站时遇到了点小问题，所以就把今天的先记下来

今天在调试网页的时候我突然意识到一个完全问题，我的侧边栏在移动端是完全隐藏的。

但是当移动设备访问时，侧边栏里的图片依旧会加载，这就造成了两个问题：

• 1.会造成没必要的流量损耗
• 2.会影响页面加载速度，对用户很不友好

所以我首先试了下lazyload这个jQuery的延迟加载插件，但是我感觉得并不适合我，首先这个插件文件体积大，也会耗费加载时间，其次这个效果我也不是很满意，所以就准备自己造轮子

首先是对侧边栏中的img标签进行修改：

 <img class="wap-none" style="max-width:40px" alt="博主邮箱" src="" data-src="https://static.yyqblog.com/media/mine/email_logo.png"> 

其次是js： 我本来是用js来获取navigator从中判断设备的，但是我在写文章的时候突然想到我为什么不根据屏幕宽度来判断设备呢？ 这样一来，又节省了十几行代码，美滋滋

var windowWidth = $(window).width();  
if (windowWidth >= 550) { 
    var imgs = document.querySelectorAll('.wap-none'); 
    for (var i = 0,len=imgs.length; i < len; i++) { 
        imgs[i].src = imgs[i].getAttribute('data-src'); 
    } 
} 

代码就只这么多，我来说下这样做的原理

首先侧边栏图片的src属性全部为空，这样一来浏览是想加载也无能为力了 然后在后面的data-src里放入真实地址，给img标签一个wap-none类,接下来就是js的事情了

var windowWidth = $(window).width();  

这句用于获取当前屏幕宽度

如果宽度大于550px,则执行if语句

var imgs = document.querySelectorAll('.wap-none'); 

该句用于获取文档中 class="wap-none" 的所有元素

获取到之后用for循环将data-src里的真实地址赋给src,这样就实现了移动端侧边栏不加载的效果

版权声明：如无特殊说明，文章均为本站原创，转载请注明出处

本文链接：https://www.yangyingqi.com/17.html