Question

我正在尝试在用C＃，ASP.net编写的电子商务网站上实现lazyload.js。我管理（在社区的帮助下，感谢顺便说一句）正确设置产品列表的插件，但我还有一个“实时搜索框”，通过ajax .load（）方法从.apsx页面加载列表。问题是延迟加载在结果容器中不起作用。我尝试了所有设置，但仍然没有运气。我加载结果容器的结果页面已经实现了延迟加载并且可以工作，但是在我的ajax加载的容器中，图像只是不替换。

这是加载搜索结果的代码（#srs是在搜索页面上保存产品列表的容器）：

$(".search-box-inner").keyup(function(){
var uType=$(this).val();
uType=uType.replace(/\ /g, '%20');
var myLength = $(this).val().length;
var url="SearchLive.aspx?SearchTerm=";
var div="#srs";
if((myLength>=3)){
    $("#search-results").slideDown("slow");
    $("#search-results").load(url+uType+' '+div);
    $(".searchbox-spinner").fadeIn("slow");
    setTimeout( "$('.searchbox-spinner').fadeOut();",1000 );
}
if(myLength<2){
    $("#search-results").slideUp("slow");
}
});

这是生成延迟加载图像的代码：

<asp:Image ID="imagePath" class="lazy" height="100px"  data-original='<%#Utilities.GetImageUrl(DataBinder.Eval(Container, "DataItem.FullImagePath").ToString(), true)%>' src="http://placehold.it/100x100" runat="server" AlternateText='<%#DataBinder.Eval(Container, "DataItem.Name")%>' />

我尝试了一些东西，但没有设法打破低谷。请帮忙......

Answer 1

通过添加

解决了这个问题

$("#search-results").scroll(function(){ 
$("img.lazy").show().lazyload() 
});

在我的load（）函数结束时。

因此，如果延迟加载在不属于页面的容器中使用时出现错误（也就是一个绝对或固定定位的容器，它具有自己的滚动并且不会触发惰性在滚动图像上加载，你可以通过初始化容器滚动功能中的延迟加载插件来手动触发它。

$("#your-container").scroll(function(){
$("img.lazy").show().lazyload() 
});

在由jquery .load（）加载的容器上使用lazyload.js

1 个答案: