DEaling with element with parent not yet rendered

Author: David-Desmaisons

example/components/Hello.vue

@@ -1,6 +1,8 @@
 <template>
   <div class="hello">
-    <div class="container">
+    <label>Show examples: <input type="checkbox" v-model="showExample" /></label>
+
+    <div class="container" v-show="showExample">
       <div>
         <div>
           <b>Resize count : {{resizeCount}} </b>
@@ -29,7 +31,7 @@
       </div>
     </div>
 
-    <div class="container">
+    <div class="container" v-show="showExample">
       <div>
         <div>
           <b>Resize count : {{resizeInitialCount}} </b>
@@ -86,7 +88,8 @@ export default {
       resizeIfCount: 0,
       resizeInitialCount: 0,
       show: false,
-      display: false
+      display: false,
+      showExample: false
     };
   },
   methods: {

package-lock.json

@@ -20,6 +20,7 @@
   },
   "dependencies": {
     "css-element-queries": "^1.0.2",
+    "intersection-observer": "^0.5.0",
     "lodash.debounce": "^4.0.8"
   },
   "devDependencies": {

package.json

@@ -1,6 +1,7 @@
 import ResizeSensor from 'resizeSensor'
 import lodashDebounce from 'lodash.debounce'
 require('./findPolyfill');
+require('intersection-observer');
 
 const { debounce = lodashDebounce } = lodashDebounce;
 const defaultDelay = 150;
@@ -15,6 +16,24 @@ function getOptions(modifiers) {
   return { delay, initial }
 }
 
+function listenToVisible(element, callback) {
+  const options = {
+    root: document.documentElement
+  }
+
+  const observer = new IntersectionObserver((entries, observer) => {
+    entries.forEach(entry => {
+      if (entry.isIntersecting) {
+        callback();
+        observer.disconnect();
+      }
+    });
+  }, options);
+
+  observer.observe(element);
+  return observer;
+}
+
 function createResizeSensor(el, { value, arg, modifiers }) {
   let callBack = () => value(el);
   const options = getOptions(modifiers);
@@ -41,9 +60,16 @@ export default {
       console.warn('v-resize should received a function as value');
       return;
     }
-    createResizeSensor(el, { value, arg, modifiers });
+    if (el.offsetParent) {
+      createResizeSensor(el, { value, arg, modifiers });
+      return;
+    }
+    el.__visibility__listener__ = listenToVisible(el, () => createResizeSensor(el, { value, arg, modifiers }))
   },
   unbind(el) {
+    if (el.__visibility__listener__) {
+      el.__visibility__listener__.disconnect();
+    }
     if (!el.resizeSensor) {
       return;
     }