为什么加载过后要删除图片

正在回答

登陆购买课程后可参与讨论,去登陆

3回答

同学你好,理解的有误差,不是说后一个会影响前一个。而是因为如下图示代码,在页面滚动过程中会一直调用lazyLoadImgs方法,如果不删除数组中,已经加载过的元素,在滚动过程中,只要出现在了可视区域,就会被再次加载,浪费性能。

http://img1.sycdn.imooc.com//climg/5f9bb795093eabe706580321.jpg

可以使用console.log输出语句测试下。示例:

删除已经加载过的元素,不管页面怎么滚动,所有的元素只会加载一次

http://img1.sycdn.imooc.com//climg/5f9bb8750901f43708710416.jpg

http://img1.sycdn.imooc.com//climg/5f9bb88709a9860a09980716.jpg

如果不删除已经加载的元素,已经加载的元素只要出现在可视区域就会重新被加载

http://img1.sycdn.imooc.com//climg/5f9bb8b409887b5808230413.jpg
http://img1.sycdn.imooc.com//climg/5f9bb8cc09206d3617200825.jpg

祝学习愉快~




好帮手慕慕子 2020-10-30 09:54:25

同学你好, 可以结合下图理解:页面滚动时,加载下图红框圈起来的内容时,由于橙色框的内容继续出现在可视区域内,会被重新加载,所以为了防止已经加载过的图片再次加载,视频中就将已经加载过的图片从数组中删除了。

http://img1.sycdn.imooc.com//climg/5f9b71f6091bb56604360542.jpg

祝学习愉快~

  • 提问者 青旗 #1
    在不写删除图片的前提下 i不是一直在+么 为什么后一个还会影响前一个 不是已经执行过了么
    2020-10-30 10:14:08
好帮手慕久久 2020-10-29 09:36:05

同学你好,问题解答如下:

imgArr中保存的是所有需要懒加载的图片元素,如果图片已经加载完了,就不需要在lazyLoadImgs方法中,再次重新加载了该图片了,因此需要将其从imgArr中删除:

http://img1.sycdn.imooc.com//climg/5f9a1c60098b89f209740250.jpg

祝学习愉快!

  • 提问者 青旗 #1
    为什么会被重新加载呢?
    2020-10-29 21:55:34
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
3.WebAPP开发与小程序
  • 参与学习           人
  • 提交作业       622    份
  • 解答问题       6815    个

微信带火了小程序,也让前端工程师有了更多的展现机会,本阶段带你从移动基础知识的学习到webAPP开发,及小程序开发,让你PC端与移动端两端通吃。

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师