diff --git a/packages/core/examples/test/resource.html b/packages/core/examples/test/resource.html
index 8cb55a9..008d378 100644
--- a/packages/core/examples/test/resource.html
+++ b/packages/core/examples/test/resource.html
@@ -52,6 +52,16 @@
       <div class="box" id="mount-html">
         <div class="title">HTML</div>
       </div>
+
+      <div class="box" id="mount-image-update">
+        <div class="title">Image: update</div>
+      </div>
+      <div class="box" id="mount-svg-update">
+        <div class="title">SVG: update</div>
+      </div>
+      <div class="box" id="mount-html-update">
+        <div class="title">HTML: update</div>
+      </div>
      
     </div>
 
@@ -106,7 +116,7 @@
           data.elements[0].desc.src = temp2;
           data.elements[1].desc.src = temp1;
           core.setData(data);
-        }, 800);
+        }, 100);
       })();
     </script>
 
@@ -144,7 +154,7 @@
           data.elements[0].desc.svg = temp2;
           data.elements[1].desc.svg = temp1;
           core.setData(data);
-        }, 800);
+        }, 100);
       })();
     </script>
 
@@ -280,12 +290,234 @@
             data.elements[0].desc.height = 50;
             data.elements[1].desc.height = 100;
             core.setData(data);
-          }, 800);
-        }, 800);
+          }, 100);
+        }, 100);
       })();
     </script>
 
 
+    <script>
+      (function() {
+        const mount = document.querySelector('#mount-image-update');
+        const core = new Core(mount, opts, config);
+        core.addElement({
+          name: "image-001",
+          x: 4,
+          y: 4,
+          w: 200,
+          h: 120,
+          type: "image",
+          desc: {
+            src: './../images/building-001.png'
+          },
+        });
+        core.addElement({
+          name: "image-002",
+          x: 120,
+          y: 80,
+          w: 120,
+          h: 120,
+          type: "image",
+          desc: {
+            src: './../images/building-002.png'
+          },
+        });
+
+        setTimeout(() => {
+          const data = core.getData();
+          console.log('data ====', data);
+          const temp1 = data.elements[0].desc.src + '?v=456';
+          const temp2 = data.elements[1].desc.src + '?v=456'
+          data.elements[0].desc.src = temp2;
+          data.elements[1].desc.src = temp1;
+
+          core.updateElement(data.elements[0]);
+          core.updateElement(data.elements[1]);
+
+          // setTimeout(() => {
+          //   core.updateElement(data.elements[1]);
+          // }, 200);
+        }, 100);
+      })();
+    </script>
+
+    <script>
+      (function() {
+        const mount = document.querySelector('#mount-svg-update');
+        const core = new Core(mount, opts, config);
+        core.addElement({
+          name: "svg-001",
+          x: 4,
+          y: 4,
+          w: 120,
+          h: 120,
+          type: "svg",
+          desc: {
+            svg: '<svg t="1622524780663" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8365" width="200" height="200"><path d="M881 442.4H519.7v148.5h206.4c-8.9 48-35.9 88.6-76.6 115.8-34.4 23-78.3 36.6-129.9 36.6-99.9 0-184.4-67.5-214.6-158.2-7.6-23-12-47.6-12-72.9s4.4-49.9 12-72.9c30.3-90.6 114.8-158.1 214.7-158.1 56.3 0 106.8 19.4 146.6 57.4l110-110.1c-66.5-62-153.2-100-256.6-100-149.9 0-279.6 86-342.7 211.4-26 51.8-40.8 110.4-40.8 172.4S151 632.8 177 684.6C240.1 810 369.8 896 519.7 896c103.6 0 190.4-34.4 253.8-93 72.5-66.8 114.4-165.2 114.4-282.1 0-27.2-2.4-53.3-6.9-78.5z" p-id="8366" fill="#1296db"></path></svg>'
+          },
+        });
+        core.addElement({
+          name: "svg-002",
+          x: 120,
+          y: 80,
+          w: 120,
+          h: 120,
+          type: "svg",
+          desc: {
+            svg: '<svg t="1622524835512" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9094" width="200" height="200"><path d="M270.1 741.7c0 23.4 19.1 42.5 42.6 42.5h48.7v120.4c0 30.5 24.5 55.4 54.6 55.4 30.2 0 54.6-24.8 54.6-55.4V784.1h85v120.4c0 30.5 24.5 55.4 54.6 55.4 30.2 0 54.6-24.8 54.6-55.4V784.1h48.7c23.5 0 42.6-19.1 42.6-42.5V346.4h-486v395.3zM627.2 141.6l44.9-65c2.6-3.8 2-8.9-1.5-11.4-3.5-2.4-8.5-1.2-11.1 2.6l-46.6 67.6c-30.7-12.1-64.9-18.8-100.8-18.8-35.9 0-70.1 6.7-100.8 18.8l-46.6-67.5c-2.6-3.8-7.6-5.1-11.1-2.6-3.5 2.4-4.1 7.4-1.5 11.4l44.9 65c-71.4 33.2-121.4 96.1-127.8 169.6h486c-6.6-73.6-56.7-136.5-128-169.7zM409.5 244.1c-14.8 0-26.9-12-26.9-26.9 0-14.8 12-26.9 26.9-26.9 14.8 0 26.9 12 26.9 26.9-0.1 14.9-12.1 26.9-26.9 26.9z m208.4 0c-14.8 0-26.9-12-26.9-26.9 0-14.8 12-26.9 26.9-26.9 14.8 0 26.9 12 26.9 26.9-0.1 14.9-12.1 26.9-26.9 26.9zM841.3 344.8c-30.2 0-54.6 24.8-54.6 55.4v216.4c0 30.5 24.5 55.4 54.6 55.4 30.2 0 54.6-24.8 54.6-55.4V400.1c0.1-30.6-24.3-55.3-54.6-55.3zM182.7 344.8c-30.2 0-54.6 24.8-54.6 55.4v216.4c0 30.5 24.5 55.4 54.6 55.4 30.2 0 54.6-24.8 54.6-55.4V400.1c0-30.6-24.5-55.3-54.6-55.3z" p-id="9095" fill="#2aa515"></path></svg>'
+          },
+        });
+
+        setTimeout(() => {
+          const data = core.getData();
+          const temp1 = data.elements[0].desc.svg;
+          const temp2 = data.elements[1].desc.svg;
+          data.elements[0].desc.svg = temp2;
+          data.elements[1].desc.svg = temp1;
+          
+          core.updateElement(data.elements[1]);
+          core.updateElement(data.elements[0]);
+        }, 100);
+      })();
+    </script>
+
+    <script>
+      (function() {
+        const mount = document.querySelector('#mount-html-update');
+        const core = new Core(mount, opts, config);
+        core.addElement({
+          name: "html-001",
+          x: 4,
+          y: 4,
+          w: 120,
+          h: 60,
+          type: "html",
+          desc: {
+            html: `<style>
+        .btn-box {
+          margin: 10px 0;
+        }
+        .btn {
+          line-height: 1.5715;
+          position: relative;
+          display: inline-block;
+          font-weight: 400;
+          white-space: nowrap;
+          text-align: center;
+          background-image: none;
+          border: 1px solid transparent;
+          box-shadow: 0 2px #00000004;
+          cursor: pointer;
+          user-select: none;
+          height: 32px;
+          padding: 4px 15px;
+          font-size: 14px;
+          border-radius: 2px;
+          color: #000000d9;
+          background: #fff;
+          border-color: #d9d9d9;
+        }
+        .btn-primary {
+          color: #fff;
+          background: #1890ff;
+          border-color: #1890ff;
+          text-shadow: 0 -1px 0 rgb(0 0 0 / 12%);
+          box-shadow: 0 2px #0000000b;
+        }
+        </style>
+        <div>
+          <div class="btn-box" style="margin-top: 0;">
+            <button class="btn" >
+              <span>Button 001</span>
+            </button>
+          </div>
+
+          <div class="btn-box">
+            <button class="btn btn-primary">
+              <span>Button Primary</span>
+            </button> 
+          </div>
+        </div>
+        `
+          },
+        });
+        core.addElement({
+          name: "html-002",
+          x: 120,
+          y: 80,
+          w: 120,
+          h: 60,
+          type: "html",
+          desc: {
+            width: 120,
+            height: 80,
+            html: `<style>
+        .btn-box {
+          margin: 10px 0;
+        }
+        .btn {
+          line-height: 1.5715;
+          position: relative;
+          display: inline-block;
+          font-weight: 400;
+          white-space: nowrap;
+          text-align: center;
+          background-image: none;
+          border: 1px solid transparent;
+          box-shadow: 0 2px #00000004;
+          cursor: pointer;
+          user-select: none;
+          height: 32px;
+          padding: 4px 15px;
+          font-size: 14px;
+          border-radius: 2px;
+          color: #000000d9;
+          background: #fff;
+          border-color: #d9d9d9;
+        }
+        .btn-primary {
+          color: #fff;
+          background: #1890ff;
+          border-color: #1890ff;
+          text-shadow: 0 -1px 0 rgb(0 0 0 / 12%);
+          box-shadow: 0 2px #0000000b;
+        }
+        </style>
+        <div>
+          <div class="btn-box" style="margin-top: 0;">
+            <button class="btn" >
+              <span>Button 002</span>
+            </button>
+          </div>
+
+          <div class="btn-box">
+            <button class="btn btn-primary">
+              <span>Button Primary</span>
+            </button> 
+          </div>
+        </div>
+        `
+          },
+        });
+
+        setTimeout(() => {
+          const data = core.getData();
+          const temp1 = data.elements[0].desc.html;
+          const temp2 = data.elements[1].desc.html;
+          data.elements[0].desc.html = temp2;
+          data.elements[1].desc.html = temp1;
+          core.setData(data);
+
+          setTimeout(() => {
+            const data = core.getData();
+            data.elements[0].desc.height = 50;
+            data.elements[1].desc.height = 100;
+            core.updateElement(data.elements[0]);
+            core.updateElement(data.elements[1]);
+          }, 100);
+        }, 100);
+      })();
+    </script>
 
   
   </body>
diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
index 1c88ae2..0e70841 100644
--- a/packages/core/src/index.ts
+++ b/packages/core/src/index.ts
@@ -24,7 +24,7 @@ import {
   _transfromElement, _emitChangeScreen, _emitChangeData, _onlyRender, _cursorStatus,
 } from './names';
 import { Mode, CursorStatus } from './constant/static';
-import { diffElementResourceChangeList } from './lib/diff';
+import { diffElementResourceChangeList, diffElementResourceChange } from './lib/diff';
 
 const { time } = util;
 const { deepClone } = util.data;
@@ -200,14 +200,19 @@ class Core {
     // if (this[_onlyRender] === true) return;
     const _elem  = deepClone(elem) as TypeElement<keyof TypeElemDesc>;
     const data = this[_data];
+    const resourceChangeUUIDs: string[] = [];
     for (let i = 0; i < data.elements.length; i++) {
       if (_elem.uuid === data.elements[i]?.uuid) {
+        const result = diffElementResourceChange(data.elements[i], _elem);
+        if (typeof result === 'string') {
+          resourceChangeUUIDs.push(result);
+        }
         data.elements[i] = _elem;
         break;
       }
     }
     this[_emitChangeData]();
-    this[_draw]();
+    this[_draw]({ resourceChangeUUIDs });
   }
 
   addElement(elem: TypeElementBase<keyof TypeElemDesc>): string | null {
diff --git a/packages/core/src/lib/diff.ts b/packages/core/src/lib/diff.ts
index 119b897..259648f 100644
--- a/packages/core/src/lib/diff.ts
+++ b/packages/core/src/lib/diff.ts
@@ -31,6 +31,42 @@ export function isChangeHTMLElementResource(
   );
 }
 
+export function diffElementResourceChange(
+  before: TypeElement<keyof TypeElemDesc>,
+  after: TypeElement<keyof TypeElemDesc>,
+): string | null {
+  let result = null;
+  let isChange = false;
+  switch (after.type) {
+    case 'image': {
+      isChange = isChangeImageElementResource(
+        before as TypeElement<'image'>,
+        after as TypeElement<'image'>
+      );
+      break;
+    }
+    case 'svg': {
+      isChange = isChangeSVGElementResource(
+        before as TypeElement<'svg'>,
+        after as TypeElement<'svg'>
+      );
+      break;
+    }
+    case 'html': {
+      isChange = isChangeHTMLElementResource(
+        before as TypeElement<'html'>,
+        after as TypeElement<'html'>
+      );
+      break;
+    }
+    default: break;
+  }
+  if (isChange === true) {
+    result = after.uuid;
+  }
+  return result;
+}
+
 export function diffElementResourceChangeList(
   before: TypeData,
   after: TypeData,
diff --git a/packages/core/src/lib/loader.ts b/packages/core/src/lib/loader.ts
index d53bd2f..e1e20d8 100644
--- a/packages/core/src/lib/loader.ts
+++ b/packages/core/src/lib/loader.ts
@@ -189,6 +189,7 @@ export default class Loader {
     if (this._status === LoaderStatus.LOADING) {
       return;
     }
+    this._status = LoaderStatus.LOADING;
 
     if (this._currentUUIDQueue.length === 0) {
       if (this._waitingLoadQueue.length === 0) {
@@ -255,6 +256,7 @@ export default class Loader {
             elemH: this._storageLoadData[uuid].elemH,
           });
         }).catch((err) => {
+          console.warn(err);
 
           loadUUIDList.splice(loadUUIDList.indexOf(uuid), 1);
           const status = _loadAction();
diff --git a/packages/core/src/lib/renderer.ts b/packages/core/src/lib/renderer.ts
index c6a83a2..4c3c2f9 100644
--- a/packages/core/src/lib/renderer.ts
+++ b/packages/core/src/lib/renderer.ts
@@ -28,6 +28,7 @@ export class Renderer {
     });
     this._loader.on('load', (res) => {
       this._drawFrame();
+      // console.log('Load: ', res);
     });
     this._loader.on('error', (res) => {
       console.log('Loader Error: ', res);
diff --git a/scripts/screen.config.js b/scripts/screen.config.js
index 9cc84ad..bb06c8e 100644
--- a/scripts/screen.config.js
+++ b/scripts/screen.config.js
@@ -5,6 +5,7 @@ const pageList = [
   { path: 'board/examples/test/event.html', w: 620, h: 270, delay: 500 },
   { path: 'core/examples/test/elements.html', w: 930, h: 810, delay: 800 },
   { path: 'core/examples/test/api.html', w: 930, h: 1570, delay: 800 },
+  { path: 'core/examples/test/update.html', w: 930, h: 540, delay: 800 },
   { path: 'idraw/examples/test/api.html', w: 930, h: 270, delay: 800 },
 ]