Jquery lazyload plugin and html table issue

Jquery lazyload plugin and html table issue

本文关键字：table issue html and lazyload plugin Jquery      更新时间：2023-09-26

>我在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>

我怀疑问题出在我启动延迟加载的以下代码中

$(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 插件加载最少的图像。 只有那些在可见区域的图像才会被下载，当用户向下滚动时，下一组将下载。 请帮助我截取代码，并告诉我需要纠正的地方。

谢谢

可能是

您的图像不是连续的，您可以使用failurelimit选项控制加载行为。尝试将以下内容添加到代码中： failurelimit : 10这样：

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

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

相关文章：