长按识别二维码关注
网站首页 >> 应用案例 >> 品牌策划 >> 图片懒加载（图片小于200k怎么修改）
本篇文章给大家谈谈图片懒加载，以及图片小于200k怎么修改对应的知识点，文章可能有点长，但是希望大家可以阅读完，增长自己的知识，最重要的是希望对各位有所帮助，可以解决了您的问题，不要忘了收藏本站喔。
图片懒加载（图片小于200k怎么修改）
关于路由的懒加载，大家可能知道，就是为了减少第一次加载程序的时候，一次性发送那么多请求减少服务器的压力，图片的懒加载也是这样的原理，放置一次性加载太多的图片给用户体验不好，而且用户也可能不会游览后边图片，比如轮播图，一次性就只加载两张图片，用户往后拨动到第二张的时候 加载第三张图片，算是一种优化的方式
图片懒加载（图片小于200k怎么修改）
这个很简单：
在 html页面，引入zepto.lazyLoad.min.js，（是因为我使用的是zepto.min.js）
如果使用的是jquery.min.js框架，就引入jquery.lazyLoad.min.js，这里不赘述了。
主要是在ajax方法里，
把获得的img的拼接那里，有三点注意的地方！！！
1.class=test-lazyload
2. data-original=+curriculums[i].imgUrl+
3. src=+GLOBAL_G.lazyImg+
html2+=div class=imgBgimg class=test-lazyload data-original=+curriculums[i].imgUrl+ src=+GLOBAL_G.lazyImg+/div;
然后再append之后，调用$(.test-lazyload).picLazyLoad();
就可以了！！！！
在 Vue，除了核心功能默认内置的指令 ( v-model 和 v-show )，Vue 也允许注册自定义指令。它的作用价值在于当开发人员在某些场景下需要对普通 DOM 元素进行操作。
Vue自定义指令有全局注册和局部注册两种方式。先来看看注册全局指令的方式，通过 Vue.directive( id, [definition] ) 方式注册全局指令。然后在入口文件中进行 Vue.use() 调用。
批量注册指令，新建 directives/index.js 文件
在 main.js 引入并调用
指令定义函数提供了几个钩子函数（可选）：
下面分享几个实用的 Vue 自定义指令
需求：实现一键复制文本内容，用于鼠标右键粘贴。
思路：
使用：给 Dom 加上 v-copy 及复制的文本即可
需求：实现长按，用户需要按下并按住按钮几秒钟，触发相应的事件
思路：
使用：给 Dom 加上 v-longpress 及回调函数即可
背景：在开发中，有些提交保存按钮有时候会在短时间内被点击多次，这样就会多次重复请求后端接口，造成数据的混乱，比如新增表单的提交按钮，多次点击就会新增多条重复的数据。
需求：防止按钮在短时间内被多次点击，使用防抖函数限制规定时间内只能点击一次。
思路：
使用：给 Dom 加上 v-debounce 及回调函数即可
背景：开发中遇到的表单输入，往往会有对输入内容的限制，比如不能输入表情和特殊字符，只能输入数字或字母等。
我们常规方法是在每一个表单的 on-change 事件上做处理。
这样代码量比较大而且不好维护，所以我们需要自定义一个指令来解决这问题。
需求：根据正则表达式，设计自定义处理表单输入规则的指令，下面以禁止输入表情和特殊字符为例。
使用：将需要校验的输入框加上 v-emoji 即可
背景：在类电商类项目，往往存在大量的图片，如 banner 广告图，菜单导航图，美团等商家列表头图等。图片众多以及图片体积过大往往会影响页面加载速度，造成不良的用户体验，所以进行图片懒加载优化势在必行。
需求：实现一个图片懒加载指令，只加载浏览器可见区域的图片。
思路：
图片懒加载有两种方式可以实现，一是绑定 srcoll 事件进行监听，二是使用 IntersectionObserver 判断图片是否到了可视区域，但是有浏览器兼容性问题。
下面封装一个懒加载指令兼容两种方法，判断浏览器是否支持 IntersectionObserver API，如果支持就使用 IntersectionObserver 实现懒加载，否则则使用 srcoll 事件监听 + 节流的方法实现。
使用，将组件内 标签的 src 换成 v-LazyLoad
背景：在一些后台管理系统，我们可能需要根据用户角色进行一些操作权限的判断，很多时候我们都是粗暴地给一个元素添加 v-if / v-show 来进行显示隐藏，但如果判断条件繁琐且多个地方需要判断，这种方式的代码不仅不优雅而且冗余。针对这种情况，我们可以通过全局自定义指令来处理。
需求：自定义一个权限指令，对需要权限判断的 Dom 进行显示隐藏。
思路：
使用：给 v-permission 赋值判断即可
需求：给整个页面添加背景水印
思路：
使用，设置水印文案，颜色，字体大小即可
需求：实现一个拖拽指令，可在页面可视区域任意拖拽元素。
思路：
使用: 在 Dom 上加上 v-draggable 即可
