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

Question

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

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

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

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

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

Answer 1

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

Answer 2

今天看了一下百度图片里面的数据请求。
每一次请求都会请求两组数据，每组30个图片对象。把每组图片放在一个新的class="imgpage"的div中

一开始我想着应该是把这两组数据都插入，然后对第一组数据直接插入，第二组数据进行懒加载（src为空）

没想到看了一下html以及请求的图片，发现没有我想象的复杂，百度图片直接就是把这两组图片按照模板拼接好插入进去了。然后看着img标签里面的data-imgurl和src属性也是很懵逼，不知道为什么要多此一举