пятница, 14 марта 2014 г.

jQuery: Как узнать что картинка загрузилась

Возникла необходимость получить событие после загрузки какой либо картинки. Нашёл простое, а главное рабочее решение. Плагин к jQuery.
Создаем файл, например такой: jquery.bindImageLoad.js
В него помещаем это:

;(function ($) {
  $.fn.bindImageLoad = function (callback) {
    function isImageLoaded(img) {
      if (!img.complete) {
        return false;
      }
      if (typeof img.naturalWidth !== "undefined" && img.naturalWidth === 0) {
        return false;
      }
      return true;
    }

    return this.each(function () {
      var ele = $(this);
      if (ele.is("img") && $.isFunction(callback)) {
        ele.one("load", callback);
        if (isImageLoaded(this)) {
          ele.trigger("load");
        }
      }
    });
  };
})(jQuery);

Затем подключаем как обычный js файл.
Как то так :
<script src="lib/jquery/jquery.bindImageLoad.js"></script>

Используется так:

$("#myimage").bindImageLoad(function () {
    // делаем что-нибудь полезное
    // переменная this указывает на картинку
});

Всё это взято отсюда.

Комментариев нет:

Отправить комментарий