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.
基本上，lazyload是可以工作的，但是只有在我稍微滚动页面之后。
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.
这是我正在使用的延迟加载设置，即使将阈值设置为2000px(大于整个页面高度)，它仍然只在用户滚动页面(甚至是1px)后加载图像。这个错误只出现在webkit浏览器中。
$(document).ready(function () {
$("img").lazyload({threshold : "2000", effect : "fadeIn", effectspeed: 2000,});
});
13 个解决方案
#1
12
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>
but if you want to load all images on ready, why need lazyload at all? You could just use $.animate.
但是，如果您想要加载所有的图像，为什么需要lazyload呢?你可以用$.animate。
#2
4
Just add this after .lazyload() and it will trigger scroll and show images
只要在.lazyload()之后添加这个，它就会触发滚动并显示图像
$(window).trigger('scroll');
#3
3
You need to set width and height for you images.
您需要为您的图像设置宽度和高度。
If width and height are not set jQuery will report images invisible in Webkit browsers on document.load event. When skip_invisible is true Lazy Load will ignore the images, meaning it wont try to figure out whether image should be loaded or not. They will load first time you scroll.
如果没有设置宽度和高度，jQuery将在文档上报告不可见的Webkit浏览器中的图像。负载的事件。当skip_invisible是true时，Lazy Load将忽略图像，这意味着它不会试图确定是否应该加载图像。他们将在你第一次滚动时加载。
If you set skip_invisible is false plugin will try to figure out should images be loaded. However since you do not have width and height set all images will be size of 0x0 or 1x1. Because of this all images are in viewport (because of their size) when plugin kicks in. Because images are in viewport Lazy Load will instruct to load them all.
如果你设置了skip_invisible is false，插件会尝试找出图片是否被加载。但是，由于没有设置宽度和高度，所以所有图像的大小都是0x0或1x1。由于这个原因，当插件启动时，所有的图片都在viewport中(因为它们的大小)。因为图像在viewport中，延迟加载将指示加载它们。
In short: Add width and height to images. Lazy Load wont work properly without them.
简而言之:增加图片的宽度和高度。没有它们，懒惰的负荷无法正常工作。
#4
2
I'm not sure when this got added, but you can manually fire the 'appear' event to some or all (depending on the css selector) appear:
我不确定这是什么时候添加的，但是您可以手动将“显示”事件发送到一些或全部(根据css选择器)出现:
$("img.lazy").trigger('appear');
Got this from here: http://yuji.wordpress.com/2014/05/14/force-jquery-lazyload-to-appear/
从这里获得:http://yuji.wordpress.com/2014/05/14/force- jquerylazyloadto -appear/
#5
1
I had the same issue. They are in a scrolling div, but would only load after an initial scroll.
我也有同样的问题。它们在滚动的div中，但是只有在初始的滚动之后才会加载。
Using 'appear' will show them all, unless you limit it. In my case, I only wanted to show the first 3 on load. The rest of them lazy load as usual.
使用“出现”将显示全部，除非你限制它。在我的例子中，我只想展示前3个负载。其余的像往常一样懒洋洋地装着。
$("img.lazy:lt(3)").trigger('appear');
#6
0
Try to pass additional parameter.
尝试传递附加参数。
skip_invisible : false
skip_invisible:假
This parameter is true by default, so it seems your images are not visible when plugin starts it's job. It could happens when you are using any preloader on your website.
这个参数在默认情况下是正确的，所以当插件启动时，你的图像看起来是不可见的。当你在你的网站上使用任何预加载器时，它可能会发生。
#7
0
I had the same problem, and found a solution for this. Please note that my images were placed inside of a div that is populated via an ajax call.
我遇到了同样的问题，找到了解决办法。请注意，我的图像被放置在通过ajax调用填充的div中。
Just change a line of code inside the lazyload sources (lines 147-150) of version 1.8.4:
只需在1.8.4版本的lazyload源(第147-150行)中更改一行代码:
/* Force initial check if images should appear. */
$(document).ready(function() {
update();
});
instead of
而不是
/* Force initial check if images should appear. */
$(window).load(function() {
update();
});
Or eventually add the call to "update()" to any other needed event.
或最终将调用“update()”添加到任何其他需要的事件。
#8
0
I had a similar issue where the images wouldn't load after a ajax call until I scrolled (even if I just scrolled 1px it would load). I found I needed to add a height and width to my images like Mika Tuupola said. My images were loaded dynamically, were different image sizes and loaded from a foreach loop. I added generic width and height attribute to the image tag then after the lazyload loads the image I removed the attributes so it would show the correct image size.
我有一个类似的问题，在ajax调用之前，图像不会加载，直到我滚动(即使我只是滚动1px，它也会加载)。我发现我需要给我的图像添加一个高度和宽度，就像米卡·图帕拉说的那样。我的图像是动态加载的，不同的图像大小，从foreach循环中加载。我向图像标记添加了通用的宽度和高度属性，然后在lazyload加载图像之后，我删除了这些属性，以便显示正确的图像大小。
<img class="lazy" src="img/placeholder.gif" data-original="img/image.gif" width="1000" height="600">
$('img.lazy').lazyload({
skip_invisible: false
}).removeClass('lazy').removeAttr('width').removeAttr('height');
#9
0
I had the same problem with hidden elements, is a simple workaround but it works. When I click on the page, I triggering scroll event to force lazyload script. You can do the same thing with the event resize
我对隐藏元素也有同样的问题，这是一个简单的解决方案，但它确实有效。当我点击页面时，我触发滚动事件来强制lazyload脚本。您可以对事件大小进行相同的操作。
$(document).ready(function () {
$("img").lazyload({
event: "lazyload",
effect: "fadeIn",
effectspeed: 2000
});
$(window).resize(function () {
$(this).trigger("scroll");
});
});
#10
0
In short: Add width and height to images. Lazy Load wont work properly without them.
简而言之:增加图片的宽度和高度。没有它们，懒惰的负荷无法正常工作。
You should be loaded in advance placeholder;Like this：
你应该提前加载占位符,像这样:
<img src="./images/grey.gif" alt="" style="display:none">
And then
然后
$("img.lazy").lazyload({placeholder : "images/grey.gif"});
If you set the width of the image to 100%,this will provide a width and height. This solved my problem.
如果您将图像的宽度设置为100%，这将提供一个宽度和高度。这解决了我的问题。
#11
0
This is working solution, but in is not very good for some reason:
这是一个有效的解决方案，但由于某些原因in不是很好:
$("img").lazyload({
/* Image loaded callback function */
load: function() {
$(window).trigger('scroll');
}
});
Every time lazyload plugin load the picture, this function will be called and window trigger 'scroll' will be emulated, so it is a solution for me
每次lazyload插件加载图片时，都会调用这个函数并模拟窗口触发器“scroll”，这对我来说是一个解决方案
#12
0
Increase the failure_limit.
增加failure_limit。
After scrolling page plugin loops though unloaded images. Loop checks if image has become visible. By default loop is stopped when first image outside viewport is found. This is based on following assumption. Order of images on page is same as order of images in HTML code. With some layouts assumption this might be wrong.
在滚动页面插件循环通过卸载的图像。循环检查图像是否可见。当在viewport外找到第一个图像时，默认循环停止。这是基于以下假设。页面上图像的顺序与HTML代码中的图像顺序相同。对于某些布局假设，这可能是错误的。
Setting failure_limit to 10 causes plugin to stop searching for images to load after finding 10 images below the fold.
将failure_limit设置为10会导致插件在找到10个图片后停止搜索要加载的图片。
#13
-1
I was dealing with the same issue and I noticed that this problem only occurs when images are placed inside a div that is initially hidden (ie. display: none;)
我正在处理同样的问题，我注意到这个问题只发生在图像被放置在一个最初隐藏的div中(例如)。显示:没有,)
#1
12
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>
but if you want to load all images on ready, why need lazyload at all? You could just use $.animate.
但是，如果您想要加载所有的图像，为什么需要lazyload呢?你可以用$.animate。
#2
4
Just add this after .lazyload() and it will trigger scroll and show images
只要在.lazyload()之后添加这个，它就会触发滚动并显示图像
$(window).trigger('scroll');
#3
3
You need to set width and height for you images.
您需要为您的图像设置宽度和高度。
If width and height are not set jQuery will report images invisible in Webkit browsers on document.load event. When skip_invisible is true Lazy Load will ignore the images, meaning it wont try to figure out whether image should be loaded or not. They will load first time you scroll.
如果没有设置宽度和高度，jQuery将在文档上报告不可见的Webkit浏览器中的图像。负载的事件。当skip_invisible是true时，Lazy Load将忽略图像，这意味着它不会试图确定是否应该加载图像。他们将在你第一次滚动时加载。
If you set skip_invisible is false plugin will try to figure out should images be loaded. However since you do not have width and height set all images will be size of 0x0 or 1x1. Because of this all images are in viewport (because of their size) when plugin kicks in. Because images are in viewport Lazy Load will instruct to load them all.
如果你设置了skip_invisible is false，插件会尝试找出图片是否被加载。但是，由于没有设置宽度和高度，所以所有图像的大小都是0x0或1x1。由于这个原因，当插件启动时，所有的图片都在viewport中(因为它们的大小)。因为图像在viewport中，延迟加载将指示加载它们。
In short: Add width and height to images. Lazy Load wont work properly without them.
简而言之:增加图片的宽度和高度。没有它们，懒惰的负荷无法正常工作。
#4
2
I'm not sure when this got added, but you can manually fire the 'appear' event to some or all (depending on the css selector) appear:
我不确定这是什么时候添加的，但是您可以手动将“显示”事件发送到一些或全部(根据css选择器)出现:
$("img.lazy").trigger('appear');
Got this from here: http://yuji.wordpress.com/2014/05/14/force-jquery-lazyload-to-appear/
从这里获得:http://yuji.wordpress.com/2014/05/14/force- jquerylazyloadto -appear/
#5
1
I had the same issue. They are in a scrolling div, but would only load after an initial scroll.
我也有同样的问题。它们在滚动的div中，但是只有在初始的滚动之后才会加载。
Using 'appear' will show them all, unless you limit it. In my case, I only wanted to show the first 3 on load. The rest of them lazy load as usual.
使用“出现”将显示全部，除非你限制它。在我的例子中，我只想展示前3个负载。其余的像往常一样懒洋洋地装着。
$("img.lazy:lt(3)").trigger('appear');
#6
0
Try to pass additional parameter.
尝试传递附加参数。
skip_invisible : false
skip_invisible:假
This parameter is true by default, so it seems your images are not visible when plugin starts it's job. It could happens when you are using any preloader on your website.
这个参数在默认情况下是正确的，所以当插件启动时，你的图像看起来是不可见的。当你在你的网站上使用任何预加载器时，它可能会发生。
#7
0
I had the same problem, and found a solution for this. Please note that my images were placed inside of a div that is populated via an ajax call.
我遇到了同样的问题，找到了解决办法。请注意，我的图像被放置在通过ajax调用填充的div中。
Just change a line of code inside the lazyload sources (lines 147-150) of version 1.8.4:
只需在1.8.4版本的lazyload源(第147-150行)中更改一行代码:
/* Force initial check if images should appear. */
$(document).ready(function() {
update();
});
instead of
而不是
/* Force initial check if images should appear. */
$(window).load(function() {
update();
});
Or eventually add the call to "update()" to any other needed event.
或最终将调用“update()”添加到任何其他需要的事件。
#8
0
I had a similar issue where the images wouldn't load after a ajax call until I scrolled (even if I just scrolled 1px it would load). I found I needed to add a height and width to my images like Mika Tuupola said. My images were loaded dynamically, were different image sizes and loaded from a foreach loop. I added generic width and height attribute to the image tag then after the lazyload loads the image I removed the attributes so it would show the correct image size.
我有一个类似的问题，在ajax调用之前，图像不会加载，直到我滚动(即使我只是滚动1px，它也会加载)。我发现我需要给我的图像添加一个高度和宽度，就像米卡·图帕拉说的那样。我的图像是动态加载的，不同的图像大小，从foreach循环中加载。我向图像标记添加了通用的宽度和高度属性，然后在lazyload加载图像之后，我删除了这些属性，以便显示正确的图像大小。
<img class="lazy" src="img/placeholder.gif" data-original="img/image.gif" width="1000" height="600">
$('img.lazy').lazyload({
skip_invisible: false
}).removeClass('lazy').removeAttr('width').removeAttr('height');
#9
0
I had the same problem with hidden elements, is a simple workaround but it works. When I click on the page, I triggering scroll event to force lazyload script. You can do the same thing with the event resize
我对隐藏元素也有同样的问题，这是一个简单的解决方案，但它确实有效。当我点击页面时，我触发滚动事件来强制lazyload脚本。您可以对事件大小进行相同的操作。
$(document).ready(function () {
$("img").lazyload({
event: "lazyload",
effect: "fadeIn",
effectspeed: 2000
});
$(window).resize(function () {
$(this).trigger("scroll");
});
});
#10
0
In short: Add width and height to images. Lazy Load wont work properly without them.
简而言之:增加图片的宽度和高度。没有它们，懒惰的负荷无法正常工作。
You should be loaded in advance placeholder;Like this：
你应该提前加载占位符,像这样:
<img src="./images/grey.gif" alt="" style="display:none">
And then
然后
$("img.lazy").lazyload({placeholder : "images/grey.gif"});
If you set the width of the image to 100%,this will provide a width and height. This solved my problem.
如果您将图像的宽度设置为100%，这将提供一个宽度和高度。这解决了我的问题。
#11
0
This is working solution, but in is not very good for some reason:
这是一个有效的解决方案，但由于某些原因in不是很好:
$("img").lazyload({
/* Image loaded callback function */
load: function() {
$(window).trigger('scroll');
}
});
Every time lazyload plugin load the picture, this function will be called and window trigger 'scroll' will be emulated, so it is a solution for me
每次lazyload插件加载图片时，都会调用这个函数并模拟窗口触发器“scroll”，这对我来说是一个解决方案
#12
0
Increase the failure_limit.
增加failure_limit。
After scrolling page plugin loops though unloaded images. Loop checks if image has become visible. By default loop is stopped when first image outside viewport is found. This is based on following assumption. Order of images on page is same as order of images in HTML code. With some layouts assumption this might be wrong.
在滚动页面插件循环通过卸载的图像。循环检查图像是否可见。当在viewport外找到第一个图像时，默认循环停止。这是基于以下假设。页面上图像的顺序与HTML代码中的图像顺序相同。对于某些布局假设，这可能是错误的。
Setting failure_limit to 10 causes plugin to stop searching for images to load after finding 10 images below the fold.
将failure_limit设置为10会导致插件在找到10个图片后停止搜索要加载的图片。
#13
-1
I was dealing with the same issue and I noticed that this problem only occurs when images are placed inside a div that is initially hidden (ie. display: none;)
我正在处理同样的问题，我注意到这个问题只发生在图像被放置在一个最初隐藏的div中(例如)。显示:没有,)