我正在开发一款显示大图像的应用程序，其显示方式与 Google map 几乎相同。当用户拖动 map 时，会加载更多图像，以便本地图的新部分可见时，相应的图像已经就位。
顺便说一下，这是一个 Javascript 项目。
我正在考虑将每个图 block 表示为一个正方形 div，并将图像加载为背景图像。
我的问题:如何准确计算显示的 div，以及移动图 block 时，如何判断新的 div 行何时可见？
谢谢!
最佳答案
关于计算显示的 div:学习使两个矩形相交的算法(stackoverflow 问题 Algorithm to detect intersection of two rectangles? 是一个很好的起点)。这样一来，显示的 div 就是那些与“ View 窗口”相交的部分是非空的。
关于告知新的 div 行何时可见:您可能无论如何都需要一个 updateInterface() 方法。使用此方法跟踪显示的 div，并且当之前未显示的 div 进入 View 窗口时，触发各种事件处理程序。
关于实现:您可能应该让 View 窗口本身就是一个带有 overflow: hidden 和 position: relative 的 div。在 CSS 中具有相对位置属性意味着绝对位置为 top 0, left 0 的 child 将位于容器的左上边缘(在您的情况下为 View 区域)。
关于效率:根据“确定显示哪些 div”算法的最终速度，您可以尝试仅在用户停止拖动而不是鼠标移动时处理相交检测。您还应该立即预加载当前 View 窗口周围的区域，这样如果用户没有拖得太远，它们就会被加载。
一些进一步的引用:
关于javascript - 谷歌地图算法(Ajax、Tiles 等)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7212080/