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);

通过他们的能见度加载所有照片？

1 个答案: