我正在为我的网站编写无限滚动脚本:
一个已经加载的HTML元素是这样的:
$(window).scroll(function(){
if($(window).scrollTop() == $(document).height() - $(window).height()){
...
$.ajax({
...
success: function(json) {if(json.success){
...
// here I append an Ajax @response with a new element to my existing HTML
$("#mindIndexSummaryFirst").append(json.items1);
$("#mindIndexSummarySecond").append(json.items2);
$("#mindIndexSummaryThird").append(json.items3);
// here I try to check whether all images are loaded
$("#mindIndexSummary img").on('load', function(){
// and I need to call two functions on loaded element
// hoverImg() need the loaded image to calculate the height
$('.pi-hover-img'+json.course).hoverImg();
$(".popup3").tooltip();
});
}
...
});
一个已经加载的HTML元素是这样的:
<div class="page-item pi-hover-img pi-normal">
<a class="overlayPop" href="#">
<a class="item_uri" id="course153" href="#">
<img src="/public/file/course/image/153-course.png" class="pi-item-image">
</a>
<a href="#" class="popup5 hide-text" style="display: none;">
<img src="/public/file/account/image/282-user.jpeg" class="item_image">
</a>
<a class="popup action-button big_interested " id="course_153" href="javascript:;" style="top: -162.5px; left: 83.5px; display: none;"> Mi interessa</a>
<a href="javascript:;">Description</a>
<a class="popup4 hide-text" href="javascript:;">Preview</a>
<span class="popup2" style="display: none;">1€</span>
<a href="/course/153/gestire-un-pubblico">
<h2 style="top: 320px;">Gestire un pubblico</h2>
<span class="rfloat pi-icon">
<img src="/public/img/site_icon/video_course_black.png">
</span>
<div class="clearfix"></div>
</a>
</div>
我加载了5个元素,15张图片,但有可能加载的元素会少一些。
问题是我的函数被调用了多次(我用alert测试了),而我不确定该函数是否在图像加载后被调用。
如果有人遇到过同样的情况,请给我建议。(PS:对于我的糟糕英语,我感到抱歉。)