qb-pc-sdk 1.3.1 → 1.3.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "qb-pc-sdk",
-  "version": "1.3.1",
-  "description": "pc广告 SDK 封装器 - 非windows不加载广告",
+  "version": "1.3.2",
+  "description": "pc广告 SDK 封装器 - 新增懒加载模式",
   "main": "core.min.js",
   "files": [
     "core.min.js",

package/src/ad-sdk-wrapper.js

@@ -663,6 +663,66 @@
             
             return true;
         }
+
+        var lazyAdObserver = null;
+        function loadLazyAd(element) {
+            if (element._qbAdInitialized) return;
+            var appId = element.getAttribute('data-app-id');
+            var placementId = element.getAttribute('data-ad-id') || element.getAttribute('data-placement-id');
+            if (!appId || !placementId) return;
+            element._qbAdInitialized = true;
+            element.innerHTML = '';
+            try {
+                var adSDKInstance = new window.AdSDK({
+                    appId: appId,
+                    placementId: placementId,
+                    container: element,
+                    onAdLoaded: function(ad, instance) {
+                        if (window.qbAds._onAdLoaded && typeof window.qbAds._onAdLoaded === 'function') {
+                            window.qbAds._onAdLoaded.call(this, ad, instance, element);
+                        }
+                    },
+                    onAdError: function(err, msg) {
+                        if (window.qbAds._onAdError && typeof window.qbAds._onAdError === 'function') {
+                            window.qbAds._onAdError.call(this, err, msg, element);
+                        }
+                    },
+                    onAdExpose: function() {
+                        if (window.qbAds._onAdExpose && typeof window.qbAds._onAdExpose === 'function') {
+                            window.qbAds._onAdExpose.call(this, element);
+                        }
+                    },
+                    onAdClick: function() {
+                        if (window.qbAds._onAdClick && typeof window.qbAds._onAdClick === 'function') {
+                            window.qbAds._onAdClick.call(this, element);
+                        }
+                    }
+                });
+                window._qbAdsInstances.push({ element: element, instance: adSDKInstance });
+            } catch (error) {
+                element._qbAdInitialized = false;
+            }
+        }
+        function startLazyAdObserver() {
+            if (!window.AdSDK || !window.GDTAdSDK) return;
+            var lazyEls = window.document.querySelectorAll('.lazy-ad');
+            if (lazyEls.length === 0) return;
+            if (!lazyAdObserver) {
+                lazyAdObserver = new window.IntersectionObserver(function(entries) {
+                    entries.forEach(function(entry) {
+                        if (!entry.isIntersecting) return;
+                        var el = entry.target;
+                        loadLazyAd(el);
+                        lazyAdObserver.unobserve(el);
+                    });
+                }, { root: null, rootMargin: '200px', threshold: 0 });
+            }
+            lazyEls.forEach(function(el) {
+                if (el._qbLazyObserved) return;
+                el._qbLazyObserved = true;
+                lazyAdObserver.observe(el);
+            });
+        }
         
         const originalPush = window.qbAds.push.bind(window.qbAds);
         
@@ -671,6 +731,7 @@
                 if (window.AdSDK && window.GDTAdSDK) {
                     setTimeout(function() {
                         initAllAdSlots();
+                        startLazyAdObserver();
                     }, 0);
                 }
             };
@@ -693,13 +754,14 @@
                 }
             }
             
-            // 尝试初始化所有广告位
+            // 尝试初始化所有广告位（即插即用 ins）
             const initialized = initAllAdSlots();
+            startLazyAdObserver();
             
             if (!initialized && window.AdSDK && window.GDTAdSDK) {
-                // 如果 SDK 已经加载但初始化失败，稍后重试
                 setTimeout(function() {
                     initAllAdSlots();
+                    startLazyAdObserver();
                 }, 100);
             }
             
@@ -712,30 +774,31 @@
             setTimeout(function() {
                 if (window.AdSDK && window.GDTAdSDK) {
                     initAllAdSlots();
+                    startLazyAdObserver();
                 }
             }, 0);
         } else {
-            // 监听 DOMContentLoaded 事件
             window.addEventListener('DOMContentLoaded', function() {
                 setTimeout(function() {
                     if (window.AdSDK && window.GDTAdSDK) {
                         initAllAdSlots();
+                        startLazyAdObserver();
                     }
                 }, 0);
             });
         }
         
-        // 如果 SDK 已经加载完成（同步加载的情况），立即尝试初始化
         if (window.AdSDK && window.GDTAdSDK) {
             setTimeout(function() {
                 initAllAdSlots();
+                startLazyAdObserver();
             }, 0);
         }
         
-        // 监听 SDK 就绪事件（异步加载的情况）
         window.addEventListener('qb-pc-sdk-ready', function() {
             setTimeout(function() {
                 initAllAdSlots();
+                startLazyAdObserver();
             }, 0);
         });
         
@@ -743,18 +806,20 @@
         if (window.MutationObserver) {
             const observer = new window.MutationObserver(function(mutations) {
                 let shouldInit = false;
+                let shouldInitLazy = false;
                 mutations.forEach(function(mutation) {
                     mutation.addedNodes.forEach(function(node) {
                         if (node.nodeType === 1) {
-                            // 检查是否是广告位标签，或其包含广告位标签
                             if (node.tagName && node.tagName.toLowerCase() === 'ins' && 
                                 node.classList && node.classList.contains('qb-adsbyqubian')) {
                                 shouldInit = true;
-                            } else if (node.querySelectorAll) {
+                            } else if (node.classList && node.classList.contains('lazy-ad')) {
+                                shouldInitLazy = true;
+                            }
+                            if (node.querySelectorAll) {
                                 const adSlots = node.querySelectorAll('ins.qb-adsbyqubian');
-                                if (adSlots.length > 0) {
-                                    shouldInit = true;
-                                }
+                                if (adSlots.length > 0) shouldInit = true;
+                                if (node.querySelectorAll('.lazy-ad').length > 0) shouldInitLazy = true;
                             }
                         }
                     });
@@ -763,7 +828,12 @@
                 if (shouldInit && window.AdSDK && window.GDTAdSDK) {
                     setTimeout(function() {
                         initAllAdSlots();
-                    }, 100); // 延迟一点，确保 DOM 完全插入
+                    }, 100);
+                }
+                if (shouldInitLazy && window.AdSDK && window.GDTAdSDK) {
+                    setTimeout(function() {
+                        startLazyAdObserver();
+                    }, 100);
                 }
             });
             

package/src/pcLazyLoad.html

@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Native 广告懒加载测试 (SDK 内置 .lazy-ad)</title>
+    <!-- 用户只需引用 SDK，懒加载由 SDK 内部 IntersectionObserver 完成 -->
+    <script src="https://unpkg.com/qb-pc-sdk@latest/inline-loader.js" defer></script>
+    <style>
+        body { margin: 0; padding: 20px; font-family: sans-serif; background: #f0f2f5; }
+        .section { max-width: 900px; margin: 0 auto 24px; background: #fff; padding: 24px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
+        .section h2 { margin: 0 0 16px; font-size: 18px; color: #333; }
+        .lazy-ad { min-height: 220px; border: 2px dashed #e0e0e0; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #999; font-size: 14px; box-sizing: border-box; }
+    </style>
+</head>
+<body>
+
+    <div class="section">
+        <h2>首屏广告位</h2>
+        <div class="lazy-ad" id="ad-pos-1" data-app-id="2009110913851875373" data-ad-id="2009111010614468619">广告位 1 - 进入视口约 200px 内时加载</div>
+    </div>
+
+    <div class="section" style="height: 400px;">
+        <h2>占位内容（向下滚动触发下方广告）</h2>
+    </div>
+
+    <div class="section">
+        <h2>下方广告位</h2>
+        <div class="lazy-ad" id="ad-pos-2" data-app-id="2009110913851875373" data-ad-id="2009111010614468619">广告位 2 - 懒加载</div>
+    </div>
+
+    <p style="max-width:900px;margin:20px auto;color:#666;font-size:14px;">
+        接入说明：页面中放入 <code>&lt;div class="lazy-ad" data-app-id="应用ID" data-ad-id="广告位ID"&gt;&lt;/div&gt;</code>，引用 SDK 后即可自动懒加载（rootMargin 200px），无需额外脚本。
+    </p>
+
+</body>
+</html>