jquery: простой предварительный загрузчик изображений + загрузка

Question

Я пытаюсь сделать простой предварительный загрузчик изображений только для одного изображения. он должен загрузить изображение и - если закончено - запустить событие для его отображения. какой самый простой способ сделать это?

Я знаю только чистое решение javascript, например document.createElement ("img"), но какой метод лучше всего использовать jquery?

что у меня так далеко (но не знаю, будет ли это оптимальным способом):

var img = $("<img src='/images/myPic.jpg'>");
img.bind("load", function(){alert("loaded!")});

спасибо

Answer 1

Если я правильно понимаю, я бы написал изображение в шаблоне или на главной странице или в другом месте, используя атрибут css, а затем событие в jquery для его отображения.

<img id="preloader" src="/myimg.jpg" style="display:none;" />


$("#some-element").ready(function(){
      $("#preloader").show();
});

Answer 2

Мне никогда не приходилось делать это с jQuery, так как я делаю это вручную в JS:

var img = new Image();
img.onLoad = function() {alert("Image has been loaded!");};
img.src = "path/to/img.ext";

Или, если я уже использую jQuery для проекта, я просто использую Thickbox .Если вы посмотрите на его источник, у него есть нечто похожее на приведенное выше.

Чтобы отобразить его, у вас есть предварительно определенный div в исходном файле, который изначально настроен на отображение: none ;, затем используйте JS для установкиего содержание на изображение и изменить его, чтобы быть видимым.Вы можете увидеть пример этого на pcgalore.com , его использует вращающийся баннер цитат.

Answer 3

Я бы использовал метод jonery .on () и прикрепил бы его к селектору:

<img id="preLoader" src="/images/myPic.jpg" alt="My Pic" style="display: none;" />

$('#preLoader').on('load', function () {
    $(this).fadeIn();
});