Página inicial Explorar Ajuda
Registrar Entrar
Project2024
/
cms-system
2
0
Fork 0
Arquivos Issues 0 Pull Requests 0 Wiki
Ver código fonte

修改图片加载方式

littlegreen 8 meses atrás
pai
9bce40765a
commit
5335cd900b
5 arquivos alterados com 41 adições e 22 exclusões
Visão dividida Mostrar estatísticas do Diff
  1. 17 2
      cms-editor/templates/default_v5/assets/js/image.js
  2. 1 1
      cms-editor/templates/default_v5/footer.html
  3. 19 15
      cms-editor/templates/default_v5/index.html
  4. 3 3
      cms-editor/templates/default_v5/swiper.html
  5. 1 1
      cms-editor/templates/default_v5/work_list.html

+ 17 - 2
cms-editor/templates/default_v5/assets/js/image.js
Ver arquivo 

@@ -1,13 +1,28 @@
 
 const images = document.querySelectorAll("img");
 
 
+function loadImage(src) {
 
+    let p = new Promise(function (resolve, reject) {
 
+        let img = new Image();
 
+        img.onload = function () {//加载时执行resolve函数
 
+            resolve(img);
 
+        }
 
+        img.onerror = function () {
 
+            reject(src);
 
+        }
 
+        img.src = src;
 
+    })
 
+    return p;
 
+}
 
+
 
 // 传给IntersectionObserver的回调函数
 
 // 在目标元素能看见时触发一次，目标元素看不见了时再触发一次
 
 const observer = new IntersectionObserver(entries => {
 
-    entries.forEach(entry => {
 
+    entries.forEach(async entry => {
 
         if (entry.isIntersecting) {
 
             const image = entry.target;
 
             const data_src = image.getAttribute("data-src");
 
-            image.setAttribute("src", data_src);
 
+            let p = await loadImage(data_src)
 
+            image.setAttribute("src", p.src);
 
             // 图片被加载后取消观察
 
             observer.unobserve(image);
 
         }

+ 1 - 1
cms-editor/templates/default_v5/footer.html
Ver arquivo 

@@ -71,7 +71,7 @@
 
                         <div></div>
 
                         <div>
 
                             {dreamer-cms:sql sql="select image_path as litpic from system_archives where id = [cc3c8a326842433292ad1bf7cae7e1c1]"}
 
-                            <img class="footer-code" src="qrcode.png" width="100px" height="100px" 
+                            <img class="footer-code" width="100px" height="100px" 
                             alt="111" loading="lazy" data-src="/resources/uploads/[field:litpic /]"
 
                             src="{dreamer-cms:template /}assets/img/none.png"/>
 
                             {/dreamer-cms:sql}

+ 19 - 15
cms-editor/templates/default_v5/index.html
Ver arquivo 

@@ -4,6 +4,9 @@
 
 <head>
 
     <meta charset="utf-8">
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
 
+    <meta name="baidu-site-verification" content="codeva-MAQk1Jjbgd" />
 
+    <meta name="keywords" content="{dreamer-cms:global name='keywords' /}">
 
+    <meta name="description" content="{dreamer-cms:global name='describe' /}">
 
     <title>{dreamer-cms:global name="title" /}</title>
 
     <link rel="stylesheet" href="{dreamer-cms:template /}assets/bootstrap/css/bootstrap.min.css">
 
     <link rel="stylesheet" href="{dreamer-cms:template /}assets/css/Roboto.css">
 
@@ -14,13 +17,13 @@
 
 </head>
 
 
 <body style="margin: 0px;">
 
-    {dreamer-cms:include file='loading.html'/}
 
+    <!-- {dreamer-cms:include file='loading.html'/} -->
 
     {dreamer-cms:include file='header.html'/}
 
     <main>
 
         {dreamer-cms:include file='swiper.html'/}
 
         <section>
 
             <div class="work-row pt-2 clearfix" style="width: 100vw;">
 
-                {dreamer-cms:list typeid="r1dl60bu" pagenum="1" pagesize="3" flag="p" sortBy="weight" sortWay="desc"}
 
+                {dreamer-cms:list typeid="r1dl60bu" pagenum="1" pagesize="3" flag="p" sortBy="weight" sortWay="desc" formkey="1c0em696" addfields="imgs"}
 
                 {dreamer-cms:if test="(1 eq [field:autoindex/])"}
 
                 <div class="work-col work-one-col float-start pr-md-2 px-md-1 pb-2 pb-md-0">
 
                     <div class="col-one-img row-two-col wow fadeIn" >
 
@@ -28,8 +31,8 @@
 
                             <a class="fs-4" href="[field:arcurl/]">[field:title/]</a>
 
                         </div>
 
                         <div class="col-img">
 
-                            <img src="{dreamer-cms:template /}assets/img/none.png"
 
-                                data-src="[field:litpic /]" loading="lazy"/>
 
+                            <img src="resources/uploads/[field:imgs /]"
 
+                                data-src="[field:litpic /]" alt="[field:title/]"/>
 
                         </div>
 
                     </div>
 
                 </div>
 
@@ -38,8 +41,8 @@
 
                 <div class="work-col work-two-col float-start pb-2 px-md-1">
 
                     <div class="col-one-img row-two-col wow fadeIn" >
 
                         <div class="col-title"><a class="fs-4" href="[field:arcurl/]">[field:title/]</a></div>
 
-                        <div class="col-img"><img src="{dreamer-cms:template /}assets/img/none.png"
 
-                                data-src="[field:litpic /]" loading="lazy"/>
 
+                        <div class="col-img"><img src="resources/uploads/[field:imgs /]"
 
+                                data-src="[field:litpic /]" alt="[field:title/]"/>
 
                         </div>
 
                     </div>
 
                 </div>
 
@@ -48,8 +51,8 @@
 
                 <div class="work-col work-two-col float-start px-md-1">
 
                     <div class="col-one-img row-two-col wow fadeIn" >
 
                         <div class="col-title"><a class="fs-4" href="[field:arcurl/]">[field:title/]</a></div>
 
-                        <div class="col-img"><img src="{dreamer-cms:template /}assets/img/none.png"
 
-                                data-src="[field:litpic /]" loading="lazy"/>
 
+                        <div class="col-img"><img src="resources/uploads/[field:imgs /]"
 
+                                data-src="[field:litpic /]" alt="[field:title/]"/>
 
                         </div>
 
                     </div>
 
                 </div>
 
@@ -57,13 +60,14 @@
 
                 {/dreamer-cms:list}
 
             </div>
 
             <div class="work-row pt-2 clearfix" style="width: 100vw;">
 
-                {dreamer-cms:list typeid="r1dl60bu" pagenum="2" pagesize="3" flag="p" sortBy="weight" sortWay="desc"}
 
+                {dreamer-cms:list typeid="r1dl60bu" pagenum="2" pagesize="3" flag="p" sortBy="weight" sortWay="desc" formkey="1c0em696" addfields="imgs"}
 
                 {dreamer-cms:if test="(1 eq [field:autoindex/])"}
 
                 <div class="work-col work-one-col float-end pl-md-2 px-md-1 pb-2 pb-md-0">
 
                     <div class="col-one-img row-two-col wow fadeIn" >
 
                         <div class="col-title"><a class="fs-4" href="[field:arcurl/]">[field:title/]</a></div>
 
-                        <div class="col-img"><img src="{dreamer-cms:template /}assets/img/none.png"
 
-                                data-src="[field:litpic /]" loading="lazy"/>
 
+                        <div class="col-img">
 
+                            <img src="resources/uploads/[field:imgs /]"
 
+                                data-src="[field:litpic /]" alt="[field:title/]"/>
 
                         </div>
 
                     </div>
 
                 </div>
 
@@ -72,8 +76,8 @@
 
                 <div class="work-col work-two-col float-end pb-2 px-md-1">
 
                     <div class="col-one-img row-two-col wow fadeIn" >
 
                         <div class="col-title"><a class="fs-4" href="[field:arcurl/]">[field:title/]</a></div>
 
-                        <div class="col-img"><img src="{dreamer-cms:template /}assets/img/none.png"
 
-                                data-src="[field:litpic /]" loading="lazy"/>
 
+                        <div class="col-img"><img src="resources/uploads/[field:imgs /]"
 
+                                data-src="[field:litpic /]" alt="[field:title/]"/>
 
                         </div>
 
                     </div>
 
                 </div>
 
@@ -82,8 +86,8 @@
 
                 <div class="work-col work-two-col float-end px-md-1">
 
                     <div class="col-one-img row-two-col wow fadeIn " >
 
                         <div class="col-title"><a class="fs-4" href="[field:arcurl/]">[field:title/]</a></div>
 
-                        <div class="col-img"><img src="{dreamer-cms:template /}assets/img/none.png"
 
-                                data-src="[field:litpic /]" loading="lazy"/>
 
+                        <div class="col-img"><img src="resources/uploads/[field:imgs /]"
 
+                                data-src="[field:litpic /]" alt="[field:title/]"/>
 
                         </div>
 
                     </div>
 
                 </div>

+ 3 - 3
cms-editor/templates/default_v5/swiper.html
Ver arquivo 

@@ -32,11 +32,11 @@
 
         <div class="swiper bsb-hero-pro-5-swiper" style=" --swiper-theme-color: #a9afb487;padding: 0;">
 
           <div class="swiper-wrapper">
 
             <!-- Slides -->
 
-            {dreamer-cms:list typeid="9jdjs0s8" pagenum="0" flag="p" sortBy="weight" sortWay="desc" formkey="h4j2gb6u" addfields="href"}
 
+            {dreamer-cms:list typeid="9jdjs0s8" pagenum="0" flag="p" sortBy="weight" sortWay="desc" formkey="h4j2gb6u" addfields="href,imgs"}
 
             <div class="swiper-slide">
 
-              <!-- {dreamer-cms:global name='website' /}article/[field:href /] -->
 
+              <!-- {dreamer-cms:global name='website' /}article/[field:href /] {dreamer-cms:template /}assets/img/none.png-->
 
               <a href="[field:arcurl /]">
 
-                <img data-src="[field:litpic /]" alt="[field:title /]" style="width: 100%;height: auto;" src="{dreamer-cms:template /}assets/img/none.png">
 
+                <img data-src="[field:litpic /]" alt="[field:title /]" style="width: 100%;height: auto;" src="/resources/uploads/[field:imgs /]">
 
               </a>
 
             </div>
 
             {/dreamer-cms:list}

+ 1 - 1
cms-editor/templates/default_v5/work_list.html
Ver arquivo 

@@ -29,7 +29,7 @@
 
                             </a>
 
                         </div>
 
                         <div class="work-img-box h-100 w-100 position-absolute">
 
-                            <img class="position-absolute work-img" data-src="[field:litpic/]" loading="lazy"/>
 
+                            <img class="position-absolute work-img" src="resources/uploads/[field:imgs /]" data-src="[field:litpic/]" loading="lazy" alt="[field:title /]"/>
 
                         </div>
 
                     </div>
 
                 </div>