頁面滿載后運行javascript自動滾動功能

Question

我在網頁上有一個功能，當網址匹配時，該功能應通過javascript自動滾動：

$(window).load(function () {
        if (window.location.href.indexOf("something-on-url") > -1) {
                $("html,body").animate({
                    scrollTop: $("#specificDiv").offset().top
                }, 300);
        }

問題是我在頁面頂部有一個輪播圖片，需要一段時間才能加載，因此它會在輪播出現之前自動滾動（輪播高度沒有考慮在內，因此會自動滾動像素，因為它應該減去輪播高度）。

我已經嘗試了document.ready()而不是$(window).load ，同樣的結果。 我曾嘗試添加圖片/輪播的高度，但是如果我轉到img.height() ，它將在當時給我“ 0”，並對其進行硬編碼，因為這是一個移動響應網站，因此這不是一個選擇。 我也嘗試過將.onload()應用於輪播和輪播標簽中的img標簽，但這不會觸發自動滾動（從不）。

到目前為止，只有這件事能正常工作，它會延遲滾動功能與setTimeOut() ，但是取決於用戶，它可能會較慢地加載輪播，因此大多數情況下，安全的setTimeOut()會很長。

Answer 1

由於用戶workabyte的評論，我通過查看輪播文檔找到了解決方法。 現在是這樣的：

  $(window).load(function () {
            if (window.location.href.indexOf("something-on-url") > -1) {
                $(".orbit-slides-container").one("orbit:before-slide-change", function () {
                    $("html,body").animate({
                        scrollTop: $("#specificDiv").offset().top
                    }, 200);
                });
            }

orbit:before-slide-change是orbit API（ http://foundation.zurb.com/docs/v/4.3.2/components/orbit.html ）中的事件。 當輪播滿載時，據說還有一個事件被觸發orbit:ready ，但這對我不起作用。

Answer 2

有時，當圖像已經被緩存時， onload事件不會被調用。

要使其正常工作，您還需要檢查this.complete和this.readyState 。

您可以使用如下形式：

$.fn.whenLoaded = function(fn){
    return this.each(function(){
        if (this.complete || this.readyState == 'complete') {
            fn.call(this);
        } else {
            $(this).load(fn);
        }
    });
}

$('img#firstCarouselImage').whenLoaded(function(){
    if (window.location.href.indexOf("something-on-url") > -1) {
         $("html,body").animate({
            scrollTop: $("#specificDiv").offset().top
         }, 300);
    }
});