jQuery 图片懒加载的方法以及用$('.lazyImg').each()出错的地方，记录一下~

我高小莫，今天在这里发誓，如果以后能不用jQuery 的我绝不再用，做习惯了前后端分离的项目，再次回到jQuery ，发现异常的恶心~~~~· 不怪谁，怪就怪当初我，选择项目架构的时候为了省力，竟然选择了，之前项目的老框架的jQuery。

有兴趣的关注一下，中国移动智慧政企，微信公众号，里面是我做的东西。

下面步入正题：

懒加载。

原因：最搜索结果页面的时候，jQuery+waterfall ,（瀑布流插件），在电脑上开发的时候还挺快，部署到测试环境，放到手机上，我的天，玛德等了十几分钟，一直加载中。。。我自己用fiddler用具抓包测了一下，加载一个7.24M的图片用了，287349ms,开始骂街，这TM谁传的图片啊这么大，别的也就一百两百k，这神马啊，加载完两个这个图片，黄花菜都凉了。

既然你费时间，加载不出来，那就不管你，其他消息加载出来，你先用占位图顶着，神马时候出来神马时候算。

做法很简单：

第一步：把img 默认的src="占位图"，设置成占位图，再给一个data-src="存放接口返回的路径"

第二步：在你需要它显示的时候：给img 一个class lazyImg，调用一个方法lazyImg()，把data-src的值，赋值给src就OK了。

var lazyImg = function () {

$('.lazyImg').each(function() {

$(this).attr('src', $(this).attr('data-url'));

})

}

简单吧。

然后再说一下这个each（），以前从没好好研究过这个each（）方法，行吧，我反思，以后碰见一个，我把你研究的透透的。

each（）用法：为每个匹配元素规定运行的函数。

$(selector).each(function(index,element))

index - 选择器的 index 位置
element - 当前的元素（也可使用 "this" 选择器）

刚开始我用的element，来调用attr（）这个方法，却报错，没有这个function，我以为获取的有问题，反复看了还是没问题，后来才知道，得用$（this）这个里面才有attr() 这个方法，获取element是没有的，都是object，但打印出来是不同的，一个像是DOM元素，一个是变成了jQuery对象，方便调用jQuery的方法，所以仅仅是element是.attr()是会报错的。若是element要获取怎么办，用JS 原生的 getAttribute 获取属性，setAttribute 来设置属性。哎呀，jQuery，用的不熟练哦~~

jQuery 图片懒加载的方法以及用$('.lazyImg').each()出错的地方，记录一下~相关推荐

Jquery图片懒加载和预加载
Jquery图片懒加载和预加载懒加载 1.什么是懒加载 Lazy Load也叫懒加载,延迟加载,顾名思义,就是在图片未到达可视区域时,不加载图片,我们常常在很多的优秀网站上看到类似的例子,例如迅雷. ...
jQuery图片懒加载示例（滚动函数再加载）
图片懒加载可以极大的减轻服务器请求的负担,如果没有做这样的操作,一个页面很多图片同时请求,就会渲染慢,影响用户体验! 原理其实很简单,就是滚动条拉下来显示的时候再加载显示出真实的图片,在不显示的区域的 ...
JavaScript两个实用的图片懒加载优化方法
文章目录一.方法一二.方法二 InterSectionObserver 一.方法一重点: 1.getBoundingClientRect().top > window.innerHeigh ...
vue中实现图片懒加载的方法（一）
1.背景: 前几天项目需求实现了图片瀑布流布局,就想着自己再实现图片的懒加载,瀑布流布局配合图片懒加载. 2.懒加载的意义图片懒加载为的是提升网页性能,减少图片在同一时间请求很多网络图片资源,当然是 ...
js 图片懒加载最好的方法
图片懒加载多种方法第一种是循环遍历img属性,判断每一个img离顶部的高度减去屏幕的高度是否大于0,小于0的话就就出现在屏幕上了,我们就更改属性显示图片,这种有弊端,因为是监听滚动条,相等于实时监 ...
layui图片懒加载-loading占位图
前言使用layui的图片懒加载,发现未加载的图片没有loading占位图,显示的是裂图,看着不是很好.找了一些解决方法我统一记录一下. layui图片懒加载使用方法 layui.use('flow' ...
【面试题】图片懒加载
是什么? 图片懒加载是前端页面优化的一种方式,根据图片是否出现在可视区域的范围内进行相应图片的请求显示(结合滚动加载). 为什么? 如果页面中需要显示很多图片的时候,当我们一味地使用<img&g ...
JQuery实现网页图片懒加载
使用img标签加载图片,在网页上显示图片,这里就简单的设置一下样式了,主要目的是展示图片的不同加载方式. 1.普通实现方式普通的实现方式就是不做任何处理,需要使用到图片时就去加载图片,这些图片一般存 ...
PC端、移动端(手机端)图片懒加载方法整理
1.PC端图片懒加载: jquery.lazyload是一个实现图片延迟加载的jQuery 插件,它可以延迟加载长页面中的图片.在浏览器可视区域外的图片在初始状态下不会被载入,直到用户将页面滚动到它们 ...

jQuery 图片懒加载的方法以及用$('.lazyImg').each()出错的地方，记录一下~

jQuery 图片懒加载的方法以及用$('.lazyImg').each()出错的地方，记录一下~相关推荐

最新文章

热门文章

jQuery 图片懒加载的方法 以及用$('.lazyImg').each()出错的地方，记录一下~

jQuery 图片懒加载的方法 以及用$('.lazyImg').each()出错的地方，记录一下~相关推荐

最新文章

热门文章

jQuery 图片懒加载的方法以及用$('.lazyImg').each()出错的地方，记录一下~

jQuery 图片懒加载的方法以及用$('.lazyImg').each()出错的地方，记录一下~相关推荐