对后端返回的一堆字符串实现图片懒加载
2019-01-02 本文已影响0人
钱学敏
需求：对后端返回的一堆字符串实现图片懒加载（react-ssr项目）
方案一：将字符串转为DOM对象在内存中操作，操作完后一次性插入页面
方案二：使用正则替换原始字符串
码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h2>需求：对后端返回的一堆字符串实现图片懒加载（react-ssr项目）</h2>
<p>方案一：将字符串转为DOM对象在内存中操作，操作完后一次性插入页面</p>
<p>方案二：使用正则替换原始字符串</p>
<div id="app"></div>
</body>
<script>
//--------方案一 在内存中操作完DOM一次性插入到页面--------
// 准备插入DOM的容器
const app = document.querySelector('#app')
// 创建文档碎片
let fragment = document.createDocumentFragment();
// 模拟后端返回的富文本
let dom=parseDom('<div id="el1">hello world</div>123<img src="http://img5.imgtn.bdimg.com/it/u=3703641458,3650593753&fm=26&gp=0.jpg"/><div id="el2">hello second</div>')
// 转换为数组
dom = Array.from(dom)
// 遍历所有DOM 需要判断nodeType 元素类型1 文本类型3
dom.forEach((item)=>{
// 插入所有节点
fragment.appendChild(item);
// 为img元素替换src 同时增加属性
if(item.nodeType === 1){
if(item.nodeName.toUpperCase() === 'IMG'){
const _src = item.getAttribute('src')
// 替换 src为占位图 增加标记
item.setAttribute('src','__假装有占位的src__')
item.setAttribute('data-src',_src)
}
}
})
// 一次性插入到容器中
app.appendChild(fragment)
console.log('方案一替换属性结果：',app.innerHTML)
// 然后就可以实现懒加载流程了。。。
//辅助方法 字符串转DOM
function parseDom(arg) {
var objE = document.createElement("div");
objE.innerHTML = arg;
return objE.childNodes;
};
//--------方案二 使用正则替换原始字符串--------
let content= '<div id="el1">hello world</div>123<img src="http://img5.imgtn.bdimg.com/it/u=3703641458,3650593753&fm=26&gp=0.jpg" /><div id="el2">hello second</div>'
let newContent = content.replace(/(?<=\<img [^>]*src=['"])([^'"]+)(?=[^>]*>)/gi, '__假装有占位的src__" data-src="$1');
// content.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/gi, function (match,i,j) {
// console.log(match,i,j);
// console.log('arguments',arguments);
// });
console.log('后端那坨原始字符串：',content)
console.log('方案二替换属性结果：',newContent)
</script>
</html>
图：
image.png
有了标记之后就可以实现懒加载流程了。。。
一个正则表达式
将“aa.js”替换为“src/aa.js” 只匹配js文件
node v8.9.0以下 不支持后发断言 8.10.0以上支持
content = content.replace(/(?<=['"]{1})([^'"]+)(?=\.js['"]{1})/gi, 'src/$1')
