替换src和动态添加img标签哪种方法常用且性能好？

Question

第一种 通过设置img的data-src替换src属性实现懒加载

第二种 最近在做一个瀑布流的图片网页，监听滚轮事件来动态获取数据，并拼接起来动态的添加到页面上。同样可以实现图片按需加载

希望有人能评价一下这两种方式的优劣。

有人可能会觉得第二种通过拼接字符串效率低，但是个人认为在大量图片下即使第一种方法也要动态的去拼接字符串来添加，不可能网页初始化的时候就把所有的img写在html里吧。

而第二种方法好像还少了一步替换src的代码

Answer 1

其实这两个做法并不冲突啊，一般来说一开始加载页面时候就会有1-2屏幕高度的数据，超出屏幕部分可以做lazyload。剩下的就类似时间轴下拉刷新的地方就是动态的按需加载了。不过一般也是通过一些模板引擎去做，全部靠js去拼凑模板比较难以维护，即使用的是ES6的模板字符串，在识别程度上可能还是插值语法的html引擎稍微舒服一些，或是假如可以在js中做到html相同的语法高亮可能也相差不多。