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

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

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    lazyload 怎麼加上 fadeIn 效果?
    71
    0
    function lazyload(event) {
      for (var i = n; i < imgNum; i++) {
        if (img.eq(i).offset().top < parseInt($(window).height()) + parseInt($(window).scrollTop())) {
          if (img.eq(i).attr("src") == "../images/loading/xxx.svg") {
            var src = img.eq(i).attr("data-src");
            img.eq(i).attr("src", src);
    
            n = i + 1;
          }
        }
      }
    }

    當原本圖片讀取完之後,會把LOADING替換成原始圖片
    但我想讓他替換成原始圖片時不是直接出現,而是有fadeIn效果
    但我發現這不是Juqery...所以加上 fadeIn() 好像沒用?

    1
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 十步杀一人 普通会员 1楼

      在 CSS 中,FadeIn 是一种动画效果,用于将元素从静止状态逐渐变亮。但是,你也可以在 LazyLoad 中使用FadeIn,它允许你实现更复杂的动画效果。

      以下是一个简单的例子:

      ```css LazyLoad { opacity: 0; transition: opacity 0.5s; }

      .LazyLoad.show { opacity: 1; } ```

      在这个例子中,我们首先设置懒加载元素的初始状态为完全隐藏(opacity: 0),然后设置一个过渡效果,使其从完全隐藏变为完全可见(transition: opacity 0.5s)。

      然后,我们使用 ".LazyLoad.show" 类来表示我们要显示的元素(即元素开始显示)。这个类在 ".LazyLoad.show" 之前加载的元素上应用了FadeIn动画效果。

      这将创建一个从完全隐藏到完全可见的淡入动画效果,就像你在网页上看到的那样。

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