html5当图片元素在页面可视区域时，如何开始加载图片…
这样做的目的是：页面中包含的图片相当多，页面载入的时候统一下载显示，会变得非常慢，所以，需要图片在可见范围就加载，否则就不加载，请使用下面的方法，可解决该问题。
解决思路：通过判断图片的位置与滚动条的位置计算出，图片是否在可见区域。根据滚动条事件来加载图片。
doct = window.document.documentElement;
el =document.querySelectorAll("#显示试题信息 img");
window.addEventListener("scroll", () =>
{
el.forEach((v, i) =>
{
/*
考虑2个情况 , 一种情况初始状态下 滚动到在中间区域的时候,这时上半部分看不见的元素就不给字体添加红色
一种情况是,从头向下看的.
*/
if (v.offsetTop > doct.scrollTop && v.offsetTop < doct.clientHeight + doct.scrollTop)
{
//var this_id=$(v).attr("src");
//var this_id=$(v).attr("id");
//console.log("图片base64是："+this_id);
if($(v).attr("src")==""){
var this_id=$(v).attr("id");
//console.log("图片ID是："+this_id);
ByIdGetPicBase64(this_id);
}
}
});
});
亲测，上述代码可用。其中：yIdGetPicBase64(this_id)函数为加载并显示图片的函数，请自行修改并使用。
上述代码非常管用，只有一个小缺点：那就是，当图片只有一张时没有滚动条，导致滚动不了滚动条就无法加载图片，这个时候，你得让浏览器窗口变小，出现滚动条就滚动一下，图片就显示出来了。