延迟加载不会加载可见图像 [英] Lazy Load won't load visible images

问题描述

我试图使用lazyload来加载可见的图像（因为我的网站是响应式的，并且一些内容在屏幕较小的情况下隐藏着display：none给客户端）。

I'm trying to use lazyload to only load images that are visible (because my site is responsive and some content is hidden with display:none to clients on a smaller screen).

基本上，lazyload可以工作，但只有在我滚动一页之后。

Basically, lazyload works, but ONLY after I scroll the page a little.

这是我正在使用的延迟加载设置，甚至在设置阈值为2000px（超过整个页面高度），它仍然只会在用户滚动页面后加载图像（甚至是1 px）。
此错误仅出现在webkit浏览器中。

This is the lazy load settings I'm using, and even after setting the threshold to 2000px (more than the entire page height) it still only loads images after the user scrolls the page (even 1 px). This bug only appears in webkit browsers.

$(document).ready(function () {
    $("img").lazyload({threshold : "2000", effect : "fadeIn", effectspeed: 2000,});
});

推荐答案

我认为这可能是<$ c的一些错误行为$ c> threshold 参数，但仍然可以根据此页面手动触发加载：

I think it could be some misbehavior of threshold parameter, but still you can manually fire the loading according to this page:

<script type="text/javascript">
  $(document).ready(function () {
      $("img")
         .lazyload({
             event: "lazyload",
             effect: "fadeIn",
             effectspeed: 2000
           })
         .trigger("lazyload");
  });
</script>

但是如果您想加载准备好的所有图片，为什么需要lazyload？您可以使用 $。animate 。

but if you want to load all images on ready, why need lazyload at all? You could just use $.animate.

这篇关于延迟加载不会加载可见图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！