代理模式——虚拟代理实现图片预加载

183 阅读1分钟
<body>
    <button onclick="handleBtnClick()">添加图片</button>
   <script>
       const handleBtnClick = () => {
          proxyImage.setSrc('https://img.zcool.cn/community/016a3d5995076ba801215603395999.gif')
       }
       var myImage = (function() {
           var imgNode = document.createElement('img')
           document.body.appendChild(imgNode)
           return {
               setSrc: function(src) {
                   imgNode.src = src
               }
           }
       })()

       var proxyImage = (function() {
            var proxyImg = new Image();
            proxyImg.onload = function() {
                myImage.setSrc(this.src)
            }
            return {
                setSrc: function(src) {
                    myImage.setSrc('./dog.png')
                    proxyImg.src = src
                }
            }
       })()
   </script>
</body>