jQuery Tools Наложение с задержкой предварительной загрузки - PullRequest
Новая
       59

jQuery Tools Наложение с задержкой предварительной загрузки

1 голос
/ 08 февраля 2012

Я использую плагин Overlay из jQuery Tools: http://flowplayer.org/tools/overlay/index.html для отображения полноразмерного изображения при нажатии на ссылку, но наложение отображается сразу и показывает загрузку изображения. Я хотел бы изменить это поведение и дождаться загрузки изображения, прежде чем запускать наложение. Плагин Overlay имеет свойство onBeforeLoad, к которому может быть присоединена функция обратного вызова. Но, конечно, отображение наложения возобновляется, как только выполняется этот обратный вызов, и не будет ожидать запуска события загрузки изображения.

Плагин имеет несколько методов API, но они не кажутся очень полезными для моей цели. В моем примере ниже две закомментированные строки должны дать вам представление о том, что, по моему мнению, может работать, но не работает.

Вот упрощенный тестовый пример: http://jsfiddle.net/GlauberRocha/9jkU5/

Есть идеи? 

var $trigger = $("#trigger"),
    api;

$trigger.overlay({
    fixed: true,
    mask: {
        color: "#000",
        opacity: .8
    },
    onBeforeLoad: function() {
        console.log("onBeforeLoad");
        api = $trigger.data("overlay"); // see http://flowplayer.org/tools/overlay/index.html "Scripting API"
        //api.close(); // Temporarily "close" the overlay?
        setTimeout(function() { // This will be replaced by the image load event
            console.log("Waiting is over!");
            //api.load(); // Load the overlay now?
        }, 2000);
    },
    onLoad: function() {
        console.log("onLoad");
    }
});

Ответы [ 2 ]

1 голос
/ 10 февраля 2012

Я изменил свой код.Эта версия работает (см. http://jsfiddle.net/GlauberRocha/rwtvK/).. Основное отличие заключается в том, как вызывается метод API ($trigger.overlay().load() против $trigger.data("overlay").load()). Это несоответствие присутствует в документах и ​​примерах jQuery Tools. 

$(function () {
  var $trigger = $("#trigger");
  $trigger.overlay({
    fixed: true,
    mask: {
      color: "#000",
      opacity: .4
    },
    onBeforeLoad: function () {
      if (typeof this.init === "undefined") {
        this.init = true;
        setTimeout(function () { // This will be replaced by the image load event handler
          console.log("OK, let's show it!");
          $trigger.overlay().load(); // Load the overlay
        }, 5000);
        console.log("Not now!");
        return false;
      }
    }
  });
});
1 голос
/ 08 февраля 2012

Хорошо, я думаю, что понимаю, чего вы хотите. Чтобы предотвратить загрузку оверлея, необходимо вернуть значение false, но только если изображение еще не загружено. Посмотрите, поможет ли это JSFIDDLE : 

var $trigger = $("#trigger"),
    api;

var imageLoaded = false;

$trigger.overlay({
    fixed: true,
    mask: {
        color: "#000",
        opacity: .8
    },
    onBeforeLoad: function() {
        console.log("onBeforeLoad");
        api = $trigger.data("overlay"); // see http://flowplayer.org/tools/overlay/index.html "Scripting API"
        //api.close(); // Temporarily "close" the overlay?

        if(!imageLoaded){
            setTimeout(function() { // This will be replaced by the image load event 
                console.log("Waiting is over!");

               api.load(); // Load the overlay now?
            }, 2000);
            imageLoaded = true;
            return false;
        }

    },
    onLoad: function() {
        console.log("onLoad");
    }
});
...