Question

所以我在我正在研究的网站上有这个脚本，它基本上从数据库加载图像并将它们放在div中。加载所有图像后，我希望它启动一个滚动插件（smoothdivscroll）。但是我找不到让最后一部分工作的方法。

以下是代码：

$.get("pages/photosgigs.php", { gig: $(this).attr("id")}, function(data) {
    $('#makeMeScrollableGall').html(data)
    $(window).load( function() {
        $("#makeMeScrollableGall").smoothDivScroll();
        resize();
    });
});

photosgigs.php上的php脚本返回一个简单的<img class="photo" src="..." />。我也尝试过$("img.photo").load()，虽然我知道它会在加载第一张图像时触发，但也不起作用。同时尝试$("#makeMeScrollableGall").load()，也无效。

我开始认为我的问题在于我的图像是动态加载的。这是对的吗？

或者我只是一个明显的延迟，我做错了吗？

Answer 1

首先，window.onload很少是你想要的。页面首次加载时onload事件触发一次，它将不会再次触发...所以目前您正在为一个事件添加一个侦听器已经解雇了，不会再次开火。而是使用图像上的load事件和检查它是否已经被触发（如果它是从缓存加载的话，可能会有它）。

这些变化看起来像这样：

$.get("pages/photosgigs.php", { gig: $(this).attr("id") }, function(data) {
  //load data, find the photo we just added
  $('#makeMeScrollableGall').html(data).find('img.photo').load(function() {
    //when the load event fires for the image, run this
    $("#makeMeScrollableGall").smoothDivScroll();
    resize();
  //loop through the loaded images (just one) but this is easier
  }).each(function() { 
     //if the image was already loaded (cached) fire the load event above
     if(this.complete) $(this).load(); 
  });
});

.complete正在检查图像是否已经加载，如果是，则通过调用.load()（.trigger('load")的快捷方式）触发刚刚绑定的事件处理程序。

jQuery.load（function（）{}）事件与.get（）协作不起作用？

1 个答案: