Получите все фотографии, загруженные их видимостью?

Question

У меня есть оригинальный сценарий: http://pastebin.com/ERWdaQym Мне нужно появиться на изображении, изображение будет отображаться. Сценарий работал, когда он был с html. Но возникла другая проблема, поместив этот скрипт в отдельный файл. Но я не получил, чтобы он работал, чтобы он работал.

У меня есть library.js, этот файл автоматически включаются в каждой странице .:

var LIBRARY = { 
    init: function() { 
     $('image[itemprop = image]').each(LIBRARY.lazyLoad()); 
    }, 
    /** 
    * LazyLoad images 
    */ 
    lazyLoad: function(event) { 
     $(function() { 
      var $window = $(window), 
       images = [], 
       imagesToBeLoaded = 0, 
       i, 
       src; 

      function throttle(func, wait) { 
       var timeout; 
       return function() { 
        var context = this, args = arguments; 
        if(!timeout) { 
         timeout = setTimeout(function() { 
          timeout = null; 
         }, wait); 
         func.apply(context, args); 
        } 
       }; 
      } 

      function inViewport($el) { 
       var top = $window.scrollTop(), 
        left = $window.scrollLeft(), 
        bottom = top + $window.height(), 
        right = left + $window.width(), 
        offset = $el.offset(), 
        thisTop = offset.top, 
        thisLeft = offset.left, 
        thisBottom = thisTop + $el.outerHeight(), 
        thisRight = thisLeft + $el.outerWidth(); 

       return !(
        bottom < thisTop || 
         top > thisBottom || 
         right < thisLeft || 
         left > thisRight 
        ); 
      } 

      // throttle so we don't do too many calls 
      var lazyScroll = throttle(function() { 
       // have all images been loaded? 
       if(imagesToBeLoaded > 0) { 
        for(i = 0; i < images.length; i++) { 
         // data is there if nothing has been done to it 
         src = images[i].data('src'); 
         // see if the image is in the view 
         if(src && inViewport(images[i])) { 
          // create a nice closure here 
          (function(img, src, i, $img) { 
           img.onload = function() { 
            console.log('Loaded ' + i + ' ' + img.src); 
            $img.attr('src', img.src); 
            imagesToBeLoaded--; 
           }; 
           img.onerror = function() { 
            console.log('Could not load ' + i + ' ' + img.src); 
            imagesToBeLoaded--; 
           }; 
           // important to remove this to avoid duplicate calls 
           $img.removeData('src'); 
           // start loading the image 
           img.src = src; 
          })(new Image(), src, i, images[i]); 
         } 
        } 
       } else { 
        // cleanup 
        images = void 0; 
        // why keep listening if there is nothing to listen 
        $window.off('resize scroll touchmove', lazyScroll); 
        // all images are loaded 
        console.log('Unloaded event listener'); 
       } 
      }, 50); 

      $('image[itemprop = image]').each(function() { 
       var $this = $(this), 
        $img = $(this.innerText || $this.text()).filter('img'); 
       // make sure we got something 
       if($img.length === 1) { 
        // remember the real image 
        $img.data('src', $img.attr('src')); 
        // use a blank image 
        $img.attr('src', 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'); 
        // cache a reference 
        images.push($img); 
        // replace noscript element with the image 
        $this.replaceWith($img); 
        imagesToBeLoaded++; 
       } 
      }); 
      // only add if we need it 
      if(imagesToBeLoaded) { 
       lazyScroll(); 
       $window.on('resize scroll touchmove', lazyScroll); 
      } 
     }); 
    } 
}; 

мне нужно подключить INIT: событие, которое будет запускать скрипт и изображения отображаются правильно, в других слова, если пользователь приходит к изображению, то он загружается. Скажите, как это сделать и что мне нужно исправить?

Answer 1

Вы можете использовать готовый документ: http://learn.jquery.com/using-jquery-core/document-ready/

что-то вроде:

$(document).ready(LIBRARY.init);