/**
 * 判断元素是否在可视范围
 */
function isVisible(ele){
  let windowHeight = window.innerHeight
  let position = ele.getBoundingClientRect()
  // 当元素的top偏移量小于页面大小并且大于高度的负数
  if(position.top<windowHeight && position.top>-position.height){
    return true
  }
  return false
}

/**
 * 对图片进行懒加载
 */
function lazyLoad(img, src){
  if(img && src && isVisible(img)){ // 元素存在，元素未被加载，元素可见
    setTimeout(function(){
      img.setAttribute('src', src)
    }, 1000) // 模拟网络请求
  }
}

// 窗口滚动
window.addEventListener('scroll', function(){
  lazyLoad(img, src)
})

/**
 * 判断元素可见
 */
function isVisible(el){
  let windowHeight = window.innerHeight
  let position = el.getBoundingClientRect()
  // 当元素的top偏移量小于页面大小并且大于高度的负数
  if(position.top<windowHeight && position.top>-position.height){
    return true
  }
  return false
}

/**
 * 对图片进行懒加载
 */
function lazyLoad(img, src){
  if(img && src && isVisible(img)){ // 元素存在，元素未被加载，元素可见
    setTimeout(function(){
      img.setAttribute('src', src)
    }, 1000) // 模拟网络请求慢的情况
  }
}

export default {
  install(Vue, options){
    Vue.directive('lazy', {
      bind: function(el, binding, vnode){
        el.setAttribute('src', options.loading)
        window.addEventListener('scroll', function(){
          lazyLoad(el, binding.value)
        })
      },
      inserted: function(el, binding, vnode){
        lazyLoad(el)
      }
    })
  }
}

1.安装插件
npm install vue-lazyload --save-dev

2.在入口文件main.js中引入并使用
import VueLazyload from 'vue-lazyload'

直接使用
Vue.use(VueLazyload)

或者添加自定义选项
Vue.use(VueLazyload, {
  preLoad: 1.3,
  error: 'dist/error.png',
  loading: 'dist/loading.gif',
  attempt: 1
})

3.修改图片显示方式为懒加载（将 :src 属性直接改为v-lazy）
<a href="javascript:;">
  <img v-lazy="'/static/img/' + item.productImage">
</a>

【百度-母婴业务部-前端】校招提前批内推
lanjianguo@baidu.com
1.姓名2.邮箱3.手机号4.简历5.推荐词（选填）
坑位有限，先到先得，截止到8月14日。
百度招聘官网：https://talent.baidu.com/external/baidu/campus.html


旷视科技
sihaiyang@megvii.com
发邮件时请注明岗位和工作地点，默认北京，正文请备注自己的姓名、邮箱、手机号。附件为简历，简历建议命名为：姓名-学校-手机号。


陌陌
https://uploadfiles.nowcoder.com/images/20190715/340047502_1563204023495_E4050D8294A27655000FDBF912B1FD08
1.打开下方二维码（用微信扫描）
2.选择自己对应的岗位
3.扔简历
4.内推完成
https://app.mokahr.com/recommendation-apply/immomo/2050/?recommenderId=192152&hash=%23%2Fjobs%3Fkeyword%3D2020%26page%3D1%26isCampusJob%3D1%26_k%3D4v9ivu


快手
867326226@qq.com


贝壳找房
23107689内推人:莫健锋
http://campus.ke.com/Campus
岗位 下划线 姓名 下划线 学校.pdf


拼多多
xulongxiang@pinduoduo.com
2020届学霸批+姓名+学校+岗位.pdf
上海 web前端研发工程师


商汤研究院招前端-cv实习生
sunjiaming@sensetime.com


阿里巴巴[秋招]
qijin.hq@alibaba-inc.com
【秋招内推】 姓名_学校_专业_L7GT


QQ音乐提前批来啦招聘web前端工程师
坐标深圳，qqmusic_fe@outlook.com


星环科技
前端开发工程师（实习生）
扫描二维码，关注“星环科技招聘”，选择“星招聘”，进入校园招聘页面，
选择你心仪的岗位进行投递

1. 说一下CSS盒模型
标准盒模型和IE怪异盒模型，然后提到了设置 box-sizing 可以转换及一些常见应用场景（这题过）
2. 怎样让一个元素水平垂直居中
3. 知道什么是同源策略吗
4. 那怎么解决跨域问题
5. 知道 JSONP 原理吗
6. 怎么检测浏览器中的内存泄漏
7. 如果要让你给 chrome 写一个插件检测内存泄漏说一下你的思路
8. 重绘和重排的区别
9. 知道浏览器事件机制吗
10. 从输入一个URL到页面加载完成发生了什么
11. 计算机网络了解吗？OSI七层模型？选择一个比较熟悉的层，介绍一下有哪些协议
12. DNS的运行过程，DNS性能优化有哪些方法
13. 写代码：给一个淘宝的页面，写一下大概如何布局
14. 写代码，DOM操作将所有页面元素存为一个{key:count}的结构，即统计在页面中每种元素的数量，将元素根据count进行排序。
15. 垃圾回收机制
16. https和http区别，对称加密和非对称加密区别
17. http1.0和http1.1和http2.0
18. CSS盒模型（box-sizing属性）
19. 写代码：多维数组展为一维数组（如：[[1,2],3,[4,5,6],[7,8]]->[1,2,3,4,5,6,7,8]）
20. 写代码：自己实现一个instanceof
21. 对于原型链的理解，new的过程中发生了什么，写代码：自己实现一个new
22. Vue双向绑定的原理
23. Vue双向绑定的原理
24. Vue组件间的通信
25. CSS雪碧图是什么
26. 重绘和重排，哪些属性会触发重绘，哪些属性会触发重排
27. ES6中let,const,var的区别
28. map,forEach的区别
29. 跨域有哪些方法
30. 写代码：多维数组展开成一维数组，分析算法的时间复杂度，用es6的什么方法可以实现（flat）
31. 写代码：数组去重有哪些方法
32. 写代码：用闭包实现add()函数，第n次调用的时候输出n
33. this的指向问题：
var a=2; var obj={ a:1, b:this.a, fun:function(){ console.log(this.b); } }
输出结果为2，分析原因
34. 写代码：实现call函数
35. TCP三次握手，为什么是三次
36. http请求包括什么，http应答包括什么
37. 了解哪些状态码
38. 输入url到页面出现发生了什么
39. 浏览器渲染机制
40. 什么是同源策略（如何判断是否同源），CORS策略
41. CSS实现三角形，箭头
42. CSS垂直居中的方法
43. CSRF和XSS是什么，如何预防
44. localStorage和sessionStorage区别，localStorage最大存储量
45. CORS机制
46. Chrome调试断点如何设置
47. TCP三次握手，为什么不是四次，为什么不是两次
48. 浏览器渲染机制，js阻塞加载
49. js动态加载，eval()方法
50. 写代码：请求一个require.js文件，并统计文件中'require'的数量，分析时间复杂度，如何优化
51. 为什么想做前端，平时如何学习前端，知不知道社区里有哪些大神，讲讲最近看的一些前端相关的知识
52. 自己对前端未来发展方向是什么
53. 如何实现一个轮播图效果
54. CSS3新特性了解哪些
55. js数组的方法、对象的方法
56. Flex布局
57. js闭包
58. json是什么，为什么要用json
59. ajax元素操作的步骤
60. 数组排序的方法有哪些？说一下归并
61. 数组深拷贝
62. 从后端返回一个很大的数组，如何实现分页显示（通过数组下标进行对应）
63. 如何实现一个下划线（和text-decoration里的underline不一样），答案：用box-shadow
64. 单页应用有什么好处
65. 如何判断一个链表是否有环
66. 一个二叉树中找到两个节点的最小公共父节点
67. js闭包是什么，什么是内存泄漏，如何解决内存泄漏问题
68. js垃圾回收机制
69. 原生ajax原理，ajax和fetch的区别，fetch支持http的哪些方法
70. option方法可以发送那些内容
71. CSS的display有哪些取值
72. iso七层模型，每一层模型的经典协议
73. es6新增的数组方法
74. 数组的reduce方法
75. js中找到一个数组最大值的方法，分析复杂度
76. MVC和MVVM的区别，MVVM的优点
77. flex布局用在哪些场景下
78. 如何适配不同的屏幕
79. HTTP状态码有哪些
80. cookie,localStorage,sessionStorage的区别
81. es6的let,const和var区别，const绑定的对象能不能修改属性值
82. Vue数组双向绑定的原理，数组中没有get和set方法，应该如何实现数据劫持
83. event-loop原理，宏任务，微任务有哪些
84. 如何实现水平垂直居中（元素定长和不定长）
85. position有哪些属性，有什么区别，除了定位上的不同还有什么区别
86. Vue组件中的data为什么是函数
87. Vue双向数据绑定的原理
88. webpack怎么用，实现机制
89. Vuex相关
90. 一个网站图片很多，加载很慢，应该如何优化：DOMContentLoad,图片懒加载，CDN
91. Vue的watch和computed区别
92. CSS选择器优先级
93. es5实现继承
94. 一个页面加载不出来可能是那些方面的原因
95. setTimeout和Promise的区别，如何实现Promise
96. HTTP持续连接实现原理
97. 了解哪些设计模式
98. jQ选择器的实现原理
99. Vue中虚拟DOM解决什么问题，原理？
100. http协议是什么，请求和响应的构成，如何区分一个请求的头部和实体（中间有一个空行）
101. http有哪些方法，为什么要有这些方法（语义化）
102. 状态码3开头的有哪些，浏览器收到301和302怎么做，304用在哪些场景
103. cookie相关，cookie用在什么场景，cookie有哪些性质
104.