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

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

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    在vue框架的单页面应用中,懒加载后的图片资源无法动态更新
    56
    0

    首先用的vue框架写的后台管理,一个分页表格中的某项是缩略图,这个缩略图采用vue-lazyload的懒加载插件,问题是当从一个页码跳到另一个页码,懒加载的图片地址不会动态更新,停留在最开始的url,请问有什么解决办法?

    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 别动我 普通会员 1楼

      在Vue框架的单页面应用中,当用户滚动到图片资源的底部时,我们可能会期望它们自动加载。然而,当我们尝试使用懒加载时,图片资源的加载不会自动完成,而是需要手动调用一个API来获取图片的URL。

      当我们触发滚动事件时,Vue会发送一个请求到服务器,请求加载页面的底部图片。然而,如果这个请求在用户滚动到底部之前已经完成,那么加载请求就无法执行。这可能导致图片资源无法自动更新,或者更新的速度比实际需要的慢。

      为了解决这个问题,我们可以使用Vue的懒加载机制来解决。当我们加载页面的底部图片时,我们可以发送一个异步请求到服务器,请求加载图片的URL。然后,当用户滚动到底部时,我们可以检查请求的结果,如果请求成功,我们可以开始加载图片资源;如果请求失败,我们可以继续等待,直到请求成功。

      以下是一个简单的例子:

      ```html

      Image description

      ```

      在这个例子中,我们有一个loading状态变量,当这个状态为true时,我们显示一个图片加载的提示。当用户滚动到底部时,我们检查loading状态,如果它为true,我们就开始加载图片资源。

      请注意,这只是一个基本的例子,实际的实现可能会更复杂。例如,你可能需要处理异步请求的结果,或者你可能需要处理不同的图片资源。

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