使用lazyload.js由jQuery的.load加载的容器()容器、加载、js、lazyload

2023-09-10 22:08:22 作者:混世小仙女

我想落实写在C#,ASP.net电子商务网站lazyload.js。 我管理的(来自社会的帮助下,顺便感谢)正确设置列出插件的产品,但我也有一个活的搜索框,它通过AJAX .load加载从.apsx页的清单()方法。 现在的问题是延迟加载不会在容器结果工作。我已经试过所有的设置,但仍然没有运气。从巫婆我加载结果容器的结果页面已经延迟加载和执行工作,但在我的AJAX装载集装箱的图像就是不更换。

I'm trying to implement lazyload.js on an e-commerce website written in C#, ASP.net. I managed (with help from the community, thanks by the way) to correctly set up the plugin for the product listing but I also have a "live search box" that loads the listings from a .apsx page via ajax .load() method. The problem is lazy load won't work in the results container. I've tried every setting but still no luck. The result page from witch I load the results container has lazy load implemented and works, but in my ajax loaded container the images just don't replace.

这是在code加载搜索结果(#srs的容器保持该产品的搜索页面上列出):

This is the code to load the search results (#srs is the container holding the product listing on the search page):

$(".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");
}
});

这是在code,生成图像偷懒装:

This is the code to generate the images to be lazy loaded:

<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")%>' />

我已经尝试了一些东西,但没能突破低谷。 请帮助...

I've tried some stuff but didn't manage to break trough. Please help...

推荐答案

加入解决了这个问题。

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

在我的负荷end()函数。

at the end of my load() function.

所以,如果延迟加载在一个容器,是不是该页面(又名一个绝对或固定定位的容器,有它自己的滚动而不会触发懒惰的一部分时missbehaves装上滚动的图像),您可以通过initilalising容器的滚动功能内部的延迟加载插件手动触发它。

So, if lazy load missbehaves when used in a container that is not part of the page (aka a absolute or fixed positioned container that has a scroll of its own and doesn't trigger the lazy loading on images on scroll), you can manually trigger it by initilalising the lazy load plugin inside the container's scroll function.

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