Open ZhengXingchi opened 4 years ago
// 创建一个本体对象
var myImage = (function () {
// 创建标签
var imgNode = document.createElement('img');
// 添加到页面
document.body.appendChild(imgNode);
return {
// 设置图片的src
setSrc: function (src) {
// 更改src
imgNode.src = src;
}
}
})();
// 创建代理对象
var proxyImage = (function () {
// 创建一个新的img标签
var img = new Image;
// img 加载完成事件
img.onload = function () {
// 调用 myImage 替换src方法
myImage.setSrc(this.src);
}
return {
// 代理设置地址
setSrc: function (src) {
// 预加载 loading
myImage.setSrc('file:// /C:/Users/svenzeng/Desktop/loading.gif');
// 赋值正常图片地址
img.src = src;
}
}
})();
proxyImage.setSrc('http:// image.qq.com/music/photo/k/000GGDys0yA0Nk.jpg');
参考如何判断图片(img)是否已经加载成功--基于react 为此写了一个useImage
import React, { useState, useEffect, useCallback, useRef } from 'react';
import img2 from '@imgs/img2.jpg'; //临时用的正式上线改掉
import _ from 'lodash'
exports.useImage = (list) => {
const [initList, setInitList] = useState(list);
const temp=useRef(undefined)
useEffect(()=>{
temp.current=_.cloneDeep(initList)
for(let i=0;i<initList.length;i++){
temp.current[i].img=initList[i].img
initList[i].img=img2
setInitList([...initList])
}
for(let i=0;i<initList.length;i++){
var img=new Image()
img.src=temp.current[i].img
img.onload=()=>{
initList[i].img=temp.current[i].img
console.log(initList)
setInitList([...initList])
}
}
},[])
return [initList]
}
参考文献
JavaScript中常用的设计模式
掌握前端5大常用设计模式,瞬间高大上
前端和设计模式
前端常用的设计模式,看这一篇总结足以
《js设计模式与开发实践》一书
曾探大神的《JavaScript设计模式与开发实践》