账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    富文本编辑器内容和图片懒加载问题
    37
    0

    1.前端框架使用的是vue,懒加载插件使用的 vue-lazyload;

    2.后台返回的是一段正常html文本带有图片如下:

     <p><img src="http://a.object.gd-zht.com/2018/01/5a5f1a41ca358.jpg" style="max-width:100%;"><img src="http://a.object.gd-zhtcom/2018/01/5a5f1a452bd2c.jpg" style="font-size: 0.875rem; max-width: 100%;"><br></p>
    

    3.在标签中v-html 渲染生成html文本。

    4.我用正则替换了src 为v-lazy,但这种渲染方式对于vue-lazyload懒加载插件来说不生效。直接在渲染了下面代码。

    
    <p><img v-lazy="http://a.object.gd-zht.com/2018/01/5a5f1a41ca358.jpg" style="max-width:100%;"><img v-lazy="http://a.object.gd-zht.com/2018/01/5a5f1a452bd2c.jpg" style="font-size: 0.875rem; max-width: 100%;"><br></p>
    

    5.配到这种问题图片应该怎么做懒加载?

    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 網名原創在這裏 普通会员 1楼

      富文本编辑器的内容和图片懒加载是两个不同的问题,需要分别解决。

      首先,关于富文本编辑器的内容懒加载,你可以通过添加“标签,并设置其src属性为懒加载图片的URL,然后使用async`属性来设置图片的加载延迟。例如:

      ```html

      这是富文本编辑器的内容

      图片描述 ```

      在这个例子中,src属性设置了图片的URL,async属性设置了图片的加载延迟,当用户滚动到图片所在的位置时,图片会从服务器加载完成后再显示。

      其次,关于富文本编辑器的图片懒加载问题,你可以通过在图片的src属性中添加async属性来实现。例如:

      html <img src="images/placeholder.jpg" alt="图片描述" async="async">

      在这个例子中,图片的src属性设置了图片的URL,async属性设置了图片的加载延迟。

      以上两种方法都可以实现富文本编辑器的内容和图片的懒加载,具体使用哪种方法取决于你的具体需求和环境。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部