Dzwebs.Net

撰写电脑技术杂文十余年

当img元素出现在html5页面的可见范围,才开始加载显示图片(使用滚动条事件监听)

Admin | 2022-4-29 10:49:17 | 被阅次数 | 374

温馨提示!

如果未能解决您的问题,请点击搜索;登陆可复制文章,点击登陆

  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)函数为加载并显示图片的函数,请自行修改并使用。

  上述代码非常管用,只有一个小缺点:那就是,当图片只有一张时没有滚动条,导致滚动不了滚动条就无法加载图片,这个时候,你得让浏览器窗口变小,出现滚动条就滚动一下,图片就显示出来了。


网站备案号:

网站备案号:滇ICP备11001339号-7

版权属性:

Copyright 2007-2021-forever Inc. all Rights Reserved.

联系方式:

Email:dzwebs@126.com QQ:83539231