响应式加载图片是一种优化网页性能的技术，特别是在移动设备和大屏幕显示器广泛应用的今天，它能够有效地减少页面初次加载时的数据量，提升用户体验。Tangram框架提供了一种优雅的方式来实现这种功能，允许图片在进入用户可视区域时才进行加载。
Tangram是一个由百度开发的前端UI框架，它提供了丰富的组件和API，便于开发者构建高性能、响应式的Web应用。在Tangram中响应式加载图片，主要依赖于其提供的`baidu.more`模块，特别是`scrollLoading`函数。
我们需要理解响应式加载的基本原理。当用户滚动页面时，只有当图片元素位于浏览器的可视区域内时，才会触发加载。这个过程可以通过计算元素相对于文档顶部的距离（`obj.y`）和浏览器视口高度（`viewHeight`）来实现。如果元素的顶部在视口的顶部和底部之间，或者元素的底部在视口的顶部和底部之间，那么该图片应当开始加载。
在Tangram中，我们可以这样实现：
```javascript
baidu.more = baidu.more || {};
baidu.more.scrollLoading = (function() {
var top = baidu.page.getScrollTop(),
left = baidu.page.getScrollLeft(),
viewHeight = baidu.page.viewHeight(),
viewWidth = baidu.page.viewWidth();
var scrollLoad = function(element) {
var obj = baidu.g(element) || {},
pos = baidu.dom.getPosition(element);
if (
(pos.top > top && pos.top < top + viewHeight) ||
(pos.top + obj.offsetHeight > top && pos.top + obj.offsetHeight < top + viewHeight) ||
(pos.left > left && pos.left < left + viewWidth) ||
(pos.left + obj.offsetWidth > left && pos.left + obj.offsetWidth < left + viewWidth)
) {
loading();
};
};
return {
scrollLoad: scrollLoad
};
})();
```
这段代码定义了一个名为`scrollLoad`的函数，它接受一个元素作为参数。`baidu.page.getScrollTop()`和`baidu.page.getScrollLeft()`分别获取当前页面的垂直和水平滚动位置，而`baidu.page.viewHeight()`和`baidu.page.viewWidth()`则获取当前视口的高度和宽度。`baidu.g(element)`用于获取指定ID或类名的DOM元素，`baidu.dom.getPosition(element)`则获取元素相对于文档的坐标。
`scrollLoad`函数中的条件判断确保了元素在可视区域内时，执行`loading()`函数。`loading()`函数通常会包含实际的图片加载逻辑，例如通过改变图片的`src`属性或使用懒加载库。
为了在页面滚动时触发`scrollLoad`函数，你需要监听`window`对象的`scroll`事件，并在事件回调中调用`scrollLoad`，以检查每个图片元素是否进入了可视区域。例如：
```javascript
baidu.event.on(window, 'scroll', function() {
var imagesToLoad = document.querySelectorAll('.lazy-img');
for (var i = 0; i < imagesToLoad.length; i++) {
baidu.more.scrollLoad(imagesToLoad[i]);
}
});
```
在这个例子中，我们假设所有需要响应式加载的图片都具有`lazy-img`类。当用户滚动时，`scrollLoad`会为每个这样的图片元素调用一次，检查并加载图片。
总结起来，Tangram框架的响应式加载图片方法通过判断元素是否处于可视区域，实现图片的延迟加载，从而提高页面性能和用户体验。通过结合Tangram提供的工具和事件监听，开发者可以轻松地将此功能集成到自己的项目中。
