/*

* 拖动图片封装

html格式：<img lay-src="${item.Resourcesurl}" alt="${item.ResourcesName}" style="position: absolute;" onmousemove="drag(this)" >

什么是懒加载？

懒加载也叫做延迟加载、按需加载，指的是在长网页中延迟加载图片数据，是一种较好的网页性能优化的方式。在比较长的网页或应用中，如果图片很多，所有的图片都被加载出来，而用户只能看到可视窗口的那一部分图片数据，这样就浪费了性能。

如果使用图片的懒加载就可以解决以上问题。在滚动屏幕之前，可视化区域之外的图片不会进行加载，在图片进入可视区域后才加载。这样使得网页的加载速度更快，减少了服务器的负载。懒加载适用于图片较多，页面列表较长（长列表）的场景中。

实现思路：在加载更多数据前，获取当前列表中的第一个或者最后一个元素位置（firstItem.offsetTop、lastItem.offsetTop），加载更多数据完成后，将滚动条位置定位到获取的元素位置（firstItem.offsetTop、lastItem.offsetTop）。

前言

在前端开发中，有时候我们需要判断一个元素是否在可视区域内，比如实现懒加载、曝光统计、动画效果等功能。那么，如何对进行元素可视区域的判定呢？本文将介绍几种常用的方法，并分析它们的优缺点。

方案介绍

一、什么是webAPI?

• web: 网页
• API: 接口 一套别人封装的属性和方法
• webAPI: 专门操作网页的方法和属性
  万物皆对象，在webAPI中把网页中所有元素 <element> 都当成对象来处理

作者：Peter 谭老师

转发链接：
https://mp.weixin.qq.com/s/XhwPOv62gypzq5MhhP-5vg

写本文的起因

一、前言

• Vue自定义指令有全局注册和局部注册两种方式。
• 本篇局部自定义指令不做叙述

从 2017 年到 2020 年，我花了大约 4 年的时间，从零到一，实现了一个可切换 WebGL 和 Canvas2D 渲染的，跨平台支持浏览器、SSR、小程序，基于 DOM 结构和支持响应式的，高性能支持批量渲染、针对可视化场景优化、支持 WebWorker 的图形系统——SpriteJS。

在这个“造轮子”过程中，我一步步将一个很简陋的渲染库，变成一个能够支撑可视化应用和游戏开发的，还算不错的一个图形库，其中有许多积累，也有许多思考。因为毕竟是两年多前的研究，有些细节可能记得不是特别清晰，其中有些特性也许已经有点过时，但我想，还是有不少内容能给大家带来参考和启发。

一次分清clientHeight、offsetHeight、scrollHeight、scrollTop、offsetTop概念：

clientHeight：可视的，看得见的部分，content+padding；

offsetHeight：在clientHeight基础上，添加“”边框“”，即content+padding+margin；

scrollTop：超过clientHeight“顶部界线”的部分，即看不见的、已经 滚动出去 的部分；