troy-yang / hexo-lazyload-image Goto Github PK

从第一张图片可以看出，图片占位符的大小是不一样的
如图所示

而我希望占位符大小是固定的
如下图所示，肉眼基本看不出这两个占位符大小的区别

请问如何固定所有图片占位符的大小比如100px100px 或者 200px200px之类的

在Hexo中同时启用该插件与Fancybox时，图片点开后Fancybox展示的图片为站位图片。

Fancybox 在页面加载时就会给页面中所有的图片套一层a标签，a标签的href就是图片的src，也就是站位图片。

不知道这个问题是否有办法解决。

同时也借此感谢作者分享这个很棒的插件，除去上述问题外，非常好用。: )

详见zuiyu1818.cn，文章内所有图片点放大全都变成loading了...

I've tried to change loadingImg: /img/loading.gifwith my own logo with 450x450px. The issue start when i open some post, then back to home again just like this video.
https://streamable.com/3zj7r
I've tried to run on localhost but there's no error log.
Now, i change the loadingImg back to default.
I use Hexo-theme-magnetic

1. 支持div 的style background

在html文件中的

<div class="ajustedBackground"  style="background-image: url('loading-image');"><div>

这个插件实现了这个功能，hexo-filter-lqip，可以参考实现

2. 支持在css文件中的图片

div.waline {
    background: url("/medias_webp/loading.svg") 100% 100% no-repeat; /* Placeholder image */
}

3 支持获取占位图片的宽高

没有宽高，可用，但存在一些问题

• 没有宽高，一些性能测试工具会报错
• lazyload显示前后文章宽高会跳动

3.1 本地图片

直接获取图片宽高

3.2 网络图片

方法1 可以缓存到本地目录来获取宽高

这个插件实现了这个功能
hexo-native-lazy-load

方法2 链接路径映射到目录路径

如果是github仓库的图片
本地clone仓库目录和网页链接之间做一个映射，那么就不需要再次下载图片来获取宽高了

页面第一加载之后再刷新图片就不再加载了，这是一个重严重的BUG，有什么好的办法解决吗？

Great plugin, and there's no problem with it.

Maybe this code here ⬇️ could be updated to begin loading before it's visible in the viewport. I think this would improve the experience greatly.

Cheers,
Ben

这个插件还是将真实数据存在 data-original 中，这会与 fancybox 冲突，根据 fancyapps/fancybox#1430 里所说，应该设为 data-src，如何做到这点？

请详见https://lruihao.cn/docs/

我根据你的说的修改了script.js文件中的97行后，每篇博客的前四张图片点开还是loading占位图，但是剩下的图片正常，有什么解决方法吗？

我测试了一下，是由于isSPA设置为true的时候，preloadRatio默认为1时，由于我第一张图就在正面就不会懒加载，这时就会导致fancybox点不了该图片。

目前解决了，把暴露在首页的图片设置nolazy才可以解决，有别的解决方法吗

作者好，实话说，这是我用过最棒的图片 lazyload 插件。但是在使用的过程中出现了一点点问题。

如果我以过快的速度划过页面，导致图片还没加载出来就过去了。由于懒加载仅仅加载正在屏幕中的图片，所以那张图片不会被加载出来。

所以，我认为，可以将机制设为如果过了那个位置，就加载那张图片，不论是否在页面内，不然有些稍微大一点的图片，别人一下过去就没有机会看到了。

仅仅个人见解，如果有更好的解决方案还请指教。

请教下如何取消某个页面的图片懒加载

I don't know if this is something you can directly control or not, but one of the dependencies for this package needs to be updated.
When your package is installed, npm shows a warning to run npm audit. Here's the result when you run npm audit:

$ npm audit

                       === npm audit security report ===                        


                                 Manual Review                                  
             Some vulnerabilities require your attention to resolve             
                                                                                
          Visit https://go.npm.me/audit-guide for additional guidance           


  Low             Regular Expression Denial of Service                          

  Package         braces                                                        

  Patched in      >=2.3.1                                                       

  Dependency of   hexo-featured-image                                           

  Path            hexo-featured-image > hexo-fs > chokidar > anymatch >         
                  micromatch > braces                                           

  More info       https://npmjs.com/advisories/786                              

found 1 low severity vulnerability in 4247 scanned packages
  1 vulnerability requires manual review. See the full report for details.

I guess this might not be directly under your control, but if it is possible, fix this.
Thank You.

比如我生成后的html头部

<meta property="og:locale" content="zh-CN">
<meta property="og:image" content="https://21ido.com/images/loading.gif">
<meta property="og:image" content="https://21ido.com/images/loading.gif">
<meta property="og:image" content="https://21ido.com/images/loading.gif">
<meta property="og:image" content="https://21ido.com/images/loading.gif">
<meta property="og:image" content="https://21ido.com/images/loading.gif">
<meta property="og:image" content="https://21ido.com/images/loading.gif">
<meta property="og:image" content="https://21ido.com/images/loading.gif">
<meta property="og:image" content="https://21ido.com/images/loading.gif">
<meta property="og:image" content="https://21ido.com/images/loading.gif">
<meta property="og:image" content="https://21ido.com/images/loading.gif">
<meta property="og:image" content="https://21ido.com/images/loading.gif">
<meta property="og:image" content="https://21ido.com/images/loading.gif">
<meta property="og:image" content="https://21ido.com/images/loading.gif">
<meta property="og:image" content="https://21ido.com/images/loading.gif">
<meta property="og:updated_time" content="2018-05-16T08:18:22.204Z">

hexo版本 6.3.0
next 6.0
git version 2.38.1.windows.1
当开启懒加载后hexo g出现以下信息，是怎么回事呢？
我的图片全部放在腾讯云的对象储存里。

作者的插件确实很好用
使用起来也很方便
经过这段时间的使用,发现有一些可以优化的地方

1. const imgRegExp = /<img(\s*?)src="(.*?)"(.*?)>/gi; 正则表达式只能匹配 第一个属性是 src 的 img 标签,对于像 <img class="logo" src="/images/logo.png"/> 无法匹配到。(建议改为const imgRegExp = /<img(.*?)src="(.*?)"(.*?)>/gi;)
2. 可以提供基于 class 或 属性 的 skip 策略,跳过一些小图片
3. 可以跳过对 base64 图片的懒加载

随机事件，有时已经明明访问了图片，也取到了图片内容，但却不进入img.onload函数，替换url。
百度了一下，好像是由于缓存的问题，导致图片的懒加载没有进入onload函数。
我的临时解决方法：删掉simple-lazyload.js里的img.onload = function(){} 前置条件

I am use latest chrome. There is no error appeared in the console.

我自定义了一个相册页面
结构目录如下
这里的source不是主题下的source

source
 └─photo
      ├─album.css
      ├─index.md
      ├─album.js
      └──album.json

其中album.js文件功能为从album.json中读取数据，并动态添加标签
内容如下

album = {
    init: function() {
        const that = this;
        $.getJSON("album.json",
            function(data) {
                that.render(data);
            });
    },
    render: function(data) {
        // 相册集数量
        let div = "",name,link,cover;
        let albumCnt = data.album.length;

        for(let i = 0;i < albumCnt;i++){
            link = data.album[i].link;
            name = data.album[i].name;
            cover = data.album[i].cover;

            // 获取图片数量
            let photoCnt = 0;
            for(let j = 0;j < data.album[i].photo.length;j++){

                photoCnt += data.album[i].photo[j].info.length;
            }

            div +=
                '<div class="gallery-group">' +
                    '<a href="'+ link +'">' +
                        '<img src="'+ cover + '" />' +
                        '<span class="group-name">'+ name +'</span>' +
                        '<span class="photoCnt">'+ photoCnt +'</span>'+
                    '</a>' +
                '</div>'
            ;
        }
        $("#group-main").append(div)
    }
};

index.md的内容如下

---
title: photo
date: 2021-02-04 11:38:27
photo: true
hide_wordcount: false
HideComment: true
---
<script src="album.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="album.css"/>
<script type="text/javascript">album.init();</script>
<div id="group-main"></div>
<!-- 测试下面这张懒加载图片 -->
<img src="https://upimage.alexhchu.com/2020/04/12/71e895eb87fb4.jpg">

这两张图片是album.js渲染出来的，img标签中并没有加上懒加载标签

这张图片是index.md中 测试下面这张懒加载图片 下的图片，可以看见有懒加载标签

导致album.js动态渲染出来的图片，没有加上懒加载的标签问题，我猜测有可能在懒加载插件之后才渲染，请问我该如何解决这一问题

hello 作者大大，请问能添加个回调函数吗，我遇到了与这篇文章类似的问题，就是瀑布流计算的时候用的loading.gif的大小，img的src被替换后没办法触发重新计算。另外我用的是 macy.js 这个插件，感谢！

安装插件后，发现不能点击查看大图了，全部显示的loading图片

主题使用的是lightgallery

我使用的是icarus主题，hexo-lazyload-image用的是最新版，但依然会存在点击大图只显示加载。使用中#1 的方法均尝试无效，请问是否有具体解决办法。

我在代码里看到有关以下内容：

Pjax 跳转页面后，相关的事件监听便都停止了，可以抛给外界一个可供重新调用的接口吗？

图片放在主题下的source/image/loading_mini.gif, _config.yml:

# lazyload image
lazyload:
  enable: true
  onlypost: true
  loadingImg: './image/loading_mini.gif'

结果重新生成后还是默认的loading图片，是路径的问题吗？我换成./source/image/loading_mini.gif后还是不生效。

我将第九行改成了

发现还是无效

preloadRatio: 3

现在懒加载效果只有继续加载之后3个页面的图片，可以让该页面 前面部分页面的图片也默认加载吗？

我想请问一下懒加载渲染时机,因为我写了一个友情链接的模板links.swig
关键代码（36~46行）加载在页面内容之前生成。但是无法被懒加载处理，请问一下原因，如有解决方法还望赐教，谢谢哥！

比如头像之类的小图片就不希望懒加载，有办法配置吗？