lazyload.js 1.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667
  1. function isInSight(el) {
  2. var bound = el.getBoundingClientRect();
  3. var clientHeight = window.innerHeight;
  4. //只考虑向下滚动加载
  5. //const clientWidth=window.innerWeight;
  6. return bound.top <= clientHeight + 100;
  7. }
  8. function checkImgs() {
  9. var index = 0;
  10. var imgs = document.querySelectorAll('.my-photo');
  11. for (var i = index; i < imgs.length; i++) {
  12. if (isInSight(imgs[i])) {
  13. loadImg(imgs[i]);
  14. index = i;
  15. }
  16. }
  17. }
  18. function loadImg(el) {
  19. var source = el.getAttribute("data-src");
  20. el.src = source;
  21. }
  22. // var mustRun = 500
  23. // function throttle(fn, mustRun) {
  24. // var timer = null;
  25. // var previous = null;
  26. // return function() {
  27. // var now = new Date();
  28. // var context = this;
  29. // var args = arguments;
  30. // if (!previous) {
  31. // previous = now;
  32. // }
  33. // var remaining = now - previous;
  34. // if (mustRun && remaining >= mustRun) {
  35. // fn.apply(context, args);
  36. // previous = now;
  37. // }
  38. // }
  39. // }
  40. function throttle(fn) {
  41. var timer = null;
  42. var previous = null;
  43. return function () {
  44. var now = new Date();
  45. var context = this;
  46. var args = arguments;
  47. if (!previous) {
  48. previous = now;
  49. }
  50. var remaining = now - previous;
  51. setTimeout(refresh(fn, remaining, context, args, previous, now));
  52. }
  53. }
  54. function refresh(fn, remaining, context, args, previous, now) {
  55. if (remaining >= 500) {
  56. fn.apply(context, args);
  57. previous = now;
  58. }
  59. }