>我在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 张图像后停止搜索要加载的图像。