Question

我在lazyload插件之前使用，并且工作正常。当我把图像放在div中然后它工作正常，但当我把图像放在表TD，然后lazyload不起作用。我搜索谷歌很多任何线索，但没有找到。所以请任何人帮我解决这个问题。

这是我从aspx文件中的渲染html代码

<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>
</title>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="https://raw.github.com/tuupola/jquery_lazyload/master/jquery.lazyload.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
    $("table[id*=dgImages] img").lazyload({
    //$("#dgImages img.lazy").lazyload({
        placeholder: "http://jquerystyle.com/-/img/ajaxLoader.gif",
        effect: "fadeIn"
    });
});
</script> 
</head>
<body>
<form method="post" id="form1">
<table id="dgImages" cellspacing="4">
<tr>
    <td>
   <img class="lazy" src='http://jquerystyle.com/-/img/ajaxLoader.gif'  data-original='snapdeals/5052603_M_1_2x.jpg' width="300px" height="300px" />
</td><td>
   <img class="lazy" src='http://jquerystyle.com/-/img/ajaxLoader.gif'  data-original='snapdeals/50584602_M_1_2x.jpg' width="300px" height="300px" />
</td><td>
   <img class="lazy" src='http://jquerystyle.com/-/img/ajaxLoader.gif'  data-original='snapdeals/55403401_M_1_2x.jpg' width="300px" height="300px" />

</td><td>
   <img class="lazy" src='http://jquerystyle.com/-/img/ajaxLoader.gif'  data-original='snapdeals/55572106_M_1_2x.jpg' width="300px" height="300px" />
</td>
</tr><tr>
    <td>
   <img class="lazy" src='http://jquerystyle.com/-/img/ajaxLoader.gif'  data-original='snapdeals/55572202_M_1_2x.jpg' width="300px" height="300px" />
</td><td>
   <img class="lazy" src='http://jquerystyle.com/-/img/ajaxLoader.gif'  data-original='snapdeals/55595101_M_1_2x.jpg' width="300px" height="300px" />
</td><td>

   <img class="lazy" src='http://jquerystyle.com/-/img/ajaxLoader.gif'  data-original='snapdeals/5571601_M_1_2x.jpg' width="300px" height="300px" />
</td><td>
   <img class="lazy" src='http://jquerystyle.com/-/img/ajaxLoader.gif'  data-original='snapdeals/60210801_M_1_2x.jpg' width="300px" height="300px" />
</td>
</tr>
</table>
</form>
</body>
</html>

我怀疑问题出在我的下面代码中，我发起了lazyload

$(document).ready(function () {
    $("table[id*=dgImages] img").lazyload({
        placeholder: "http://jquerystyle.com/-/img/ajaxLoader.gif",
        effect: "fadeIn"
    });
});

我也尝试过像

$(document).ready(function () {
    $("#dgImages img.lazy").lazyload({
        placeholder: "http://jquerystyle.com/-/img/ajaxLoader.gif",
        effect: "fadeIn"
    });
});

但仍然没有运气。所以请指导我，当我的datalist或gridview有很多图像时，我怎么能使用jquery lazyload插件加载最小图像。只下载那些在可见区域的图像，当用户向下滚动时，下一组将下载。请帮我解释代码并告诉我需要纠正的地方。

感谢

Answer 1

可能是您的图片不是连续的，您可以使用failurelimit选项控制加载行为。请尝试在代码中添加以下内容：failurelimit : 10因此：

$(document).ready(function () {
    $("#dgImages img.lazy").lazyload({
        placeholder: "http://jquerystyle.com/-/img/ajaxLoader.gif",
        effect: "fadeIn",
        failurelimit : 10
    });
});

将failurelimit设置为10会导致插件在找到折叠后的10张图像后停止搜索要加载的图像。

Jquery lazyload插件和html表问题

这是我从aspx文件中的渲染html代码

1 个答案: