我想落实写在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()
});