[已解决] 加载中占位符

hbghlyj

Discuz 浮动窗口有加载占位符（看起来像一个旋转的并且是无限旋转的动画

这是在common.css中实现的

1. .loadicon {
2. background:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%23999' d='M12.2 12.2L14 14H9V9l1.8 1.8c.7-.7 1.2-1.7 1.2-2.8 0-1.9-1.3-3.4-3-3.9v-2c2.8.4 5 2.9 5 5.9 0 1.6-.7 3.1-1.8 4.2zM3.8 3.8C2.7 4.8 2 6.3 2 8c0 3 2.2 5.4 5 5.9v-2.1c-1.7-.4-3-2-3-3.9 0-1.1.5-2.1 1.2-2.8L7 7V2H2l1.8 1.8z'/%3e%3c/svg%3e");
3. display:inline-block;
4. width:16px;
5. height:16px;
6. animation:dzrotate 1.2s infinite linear;
7. }

复制代码

希望加载图片时，有一个加载占位符
例如，帖子内容中的tikz或asy图像有延迟时间加载，在此期间需要用户知道那里有图像

hbghlyj

hbghlyj 发表于 2024-2-17 17:43
例如，帖子内容中的tikz或asy图像有延迟时间加载，在此期间需要用户知道那里有图像

如果没有占位符，他会滚动过去，并且永远不会看到图片，所以可能会觉得内容少了点什么信息； 如果有占位符，他会留下来等待图像加载，如果图片加载成功，这会给他带来更好的体验，不会觉得内容少了点什么

所以我赞成在帖子内容中添加图像占位符
@kuing 这个可以吗？

kuing

你直接说实现方法，改哪里。

=== test ===
正常 tikz 测试：

1. [tikz]\begin{align}1\end{align}[/tikz]

复制代码

错误 tikz 测试：

1. [tikz]\begin{align}1[/tikz]

复制代码

在附件上传的图片测试：

hbghlyj

kuing 发表于 2024-2-17 17:53
你直接说实现方法，改哪里。

目前，[asy] 会转换为 <asy>，我认为如果添加 class=“loadicon”，它将应用 Discuz 加载中占位符的样式

我认为需要修改一下zdy3pc.js

hbghlyj

为了方便可以借用 Discuz CSS 的样式，所以我们添加这个class="loadicon"
图像完全加载后可能需要删除 class="loadicon"

hbghlyj

可能需要找个网速慢的地方来测试一下图像加载占位符

kuing

我到后台开启了“图片延时加载”。
现在可以去找一个多图的帖子，可以看到加载图片时就有占位符了，你研究一下具体怎么实现的，照葫芦画瓢好了

hbghlyj

kuing 发表于 2024-2-17 18:15
现在可以去找一个多图的帖子，

在多图的帖子页面底部我看到

1. <script type="text/javascript">
2. new lazyload();
3. </script>

复制代码

它调用函数“lazyload”，该函数位于“kuing.cjhb.site/data/cache/forum_viewthread.js”

lazyload/this.getOffset

lazyload/this.showImage

图像是

hbghlyj

首先它将 src 设置为占位符

1.         dom.innerHTML = '<div style="width: ' + width + 'px; height: ' + height + 'px;background: url(' + IMGDIR + '/loading.gif) no-repeat center center;"></div>';

复制代码

当执行“showimage”函数时，它将“src”设置为实际路径

1.         img.setAttribute(
2.           'src',
3.           img.getAttribute('file') ? img.getAttribute('file') : img.getAttribute('src')
4.         );

复制代码

hbghlyj

可以在此脚本中找到类似的过程 greasyfork.org/en/scripts/2253-discuz论坛头像上传助手/code
在第 72 行，它首先将 src 设置为占位符，然后调用“showimage”

1.                 avatars[target].img.src = "http://bcs.duapp.com/user-img/discuz-avatar/loading.gif";
2.                 setTimeout(function(){
3.                         getImageHexString(target, file);
4.                         showImage(target, file);
5.                 }, 100);

复制代码

然后 showimage 在第 40 行将 src 设置为实际文件路径

1.                         avatars[target].img.src = e.target.result;

复制代码

hbghlyj

一个简单的方法是，我们不将 [asy] 替换为 <asy>，而是将其替换为 <asy class="loadicon">，
并在完全加载后删除 class="loadicon" 属性
@kuing 这个可以吗？

kuing

hbghlyj 发表于 2024-2-18 02:43
一个简单的方法是，我们不将 [asy] 替换为 <asy>，而是将其替换为 <asy class="loadicon">，
并在完全加载 ...

我加在了 img 上：

1. class="loadicon" onload="this.classList.remove(\'loadicon\')"

复制代码

另外还对其加一个 margin 增加空白距离，更容易看到它。

1. asy .loadicon,tikz .loadicon { margin: 42px; }

复制代码

另另外，“图片延时加载”我就先关掉了。
如果想让帖内的图片也用这种方式加载，应该如何修改模板？

hbghlyj

kuing 发表于 2024-2-18 04:19
如果想让帖内的图片也用这种方式加载，应该如何修改模板？

我猜可以通過修改 forum_viewthread.js 中的函数“lazyload”

kuing

hbghlyj 发表于 2024-2-18 18:54
我猜可以通過修改 forum_viewthread.js 中的函数“lazyload”

不能像上面那样简单地添加 class="loadicon" onload="this.classList.remove(\'loadicon\')" 吗？
我主要不知道显示附件图片的相关代码都在哪……

hbghlyj

kuing 发表于 2024-2-18 15:06
我主要不知道显示附件图片的相关代码都在哪…… ...

可能在source/function/function_discuzcode.php

1. function parseimg($width, $height, $src, $lazyload, $pid, $extra = '') {

复制代码

在这个函数中有

1. $img = '<img id="aimg_'.$rimg_id.'" onclick="zoom(this, this.src, 0, 0, '.($_G['setting']['showexif'] ? 1 : 0).')" class="zoom"'.($width > 0 ? ' width="'.$width.'"' : '').($height > 0 ? ' height="'.$height.'"' : '').' '.$attrsrc.'="{url}" '.($extra ? $extra.' ' : '').'border="0" alt="" />';

复制代码

hbghlyj

图像可以作为附件上传或作为图像上传，它们不会自动转换，不幸的是

也可以看看这个source/function/function_attachment.php

1. function attachwidth($width) {
2.         global $_G;
3.         if($_G['setting']['imagemaxwidth'] && $width) {
4.                 return 'class="zoom" onclick="zoom(this, this.src, 0, 0, '.($_G['setting']['showexif'] ? 1 : 0).')" width="'.($width > $_G['setting']['imagemaxwidth'] ? $_G['setting']['imagemaxwidth'] : $width).'"';
5.         } else {
6.                 return 'thumbImg="1"';
7.         }
8. }

复制代码

kuing

hbghlyj 发表于 2024-2-18 23:42
图像可以作为附件上传或作为图像上传，它们不会自动转换，不幸的是

也可以看看这个source/function/functi ...

也可以看看 template/default/forum/discuzcode.htm#L260

1.                                                 <img{if $attach['price'] && $_G['forum_attachmentdown'] && $_G['uid'] != $attach['uid']} class="attprice"{/if} id="aimg_$attach[aid]" aid="$attach[aid]" src="{STATICURL}image/common/none.gif" zoomfile="{if $attach[refcheck]}forum.php?mod=attachment{$is_archive}&aid=$aidencode&noupdate=yes&nothumb=yes{else}{$attach[url]}$attach[attachment]{/if}" file="{if $attach[refcheck]}forum.php?mod=attachment{$is_archive}&aid=$aidencode&noupdate=yes{else}{$attach[url]}$attach[attachment]{/if}" $widthcode id="aimg_$attach[aid]" inpost="1"{if $_GET['from'] != 'preview'} onmouseover="showMenu({'ctrlid':this.id,'pos':'12'})"{/if} />

复制代码

平时上传图片，然后点击插入到正文，实际显示的可能是这段。

而当中的 $widthcode 往前翻到 L227 的定义是 $widthcode = attachwidth($attach['width']);，果然就是由楼上说的那段函数决定的。
（另外发现这段里面有两个 id="aimg_$attach[aid]" 应该是打重复了）

==========

哦，上面的不是最新的，应该看这个：
https://gitee.com/Discuz/DiscuzX/blob/v3.5/upload/template/default/forum/discuzcode.htm#L260

1.                                                 <img{if $attach['price'] && $_G['forum_attachmentdown'] && $_G['uid'] != $attach['uid']} class="attprice"{/if} id="aimg_$attach[aid]" aid="$attach[aid]" src="{STATICURL}image/common/none.gif" zoomfile="{if $attach[refcheck]}forum.php?mod=attachment{$is_archive}&aid=$aidencode&noupdate=yes&nothumb=yes{else}{$attach[url]}$attach[attachment]{/if}" file="{if $attach[refcheck]}forum.php?mod=attachment{$is_archive}&aid=$aidencode&noupdate=yes{else}{$attach[url]}$attach[attachment]{/if}" $widthcode inpost="1"{if (!$_G['setting']['hideattachtips'] || ($firstpost && $_G['fid'] && $_G['forum']['picstyle'] && ($_G['forum']['ismoderator'] || $_G['uid'] == $attach['uid']))) && $_GET['from'] != 'preview'} onmouseover="showMenu({'ctrlid':this.id,'pos':'12'})"{/if} />

复制代码

后面是有点不同的，删除了上面说的重复 id=... ，还多了一些不知啥的条件判断来决定是否显示图片信息。

=====
而对于上传的图片附件又没有点击插入正文的，用的应该是 L198：

1.                                                         <img id="aimg_$attach[aid]" aid="$attach[aid]" src="{STATICURL}image/common/none.gif" zoomfile="{if $attach[refcheck]}forum.php?mod=attachment{$is_archive}&aid=$aidencode&noupdate=yes&nothumb=yes{else}{$attach[url]}$attach[attachment]{/if}" file="{if $attach[refcheck]}forum.php?mod=attachment{$is_archive}&aid=$aidencode&noupdate=yes{else}{$attach[url]}$attach[attachment]{/if}" $widthcode alt="$attach[imgalt]" title="$attach[imgalt]" w="$attach[width]" />

复制代码

同样用了 $widthcode。

那应该怎样改呢？

kuing

Discuz 搞的显示图片真复杂……

发现如果楼层里有图，则在该楼层的最后就会有一段 js 类似于：

1. <script type="text/javascript" reload="1">
2. aimgcount[58031] = ['15883'];
3. attachimggroup(58031);
4. attachimgshow(58031);
5. var aimgfid = 0;
6. </script>

复制代码

attachimggroup 和 attachimgshow 在 gitee.com/Discuz/DiscuzX/blob/v3.5/upload/static/js/forum_viewthread.js 的开头就有定义，后者我看懂其中一步是将 img 的 src 替换成 file 里的实际图片地址。