Question

我正在使用jQuery推出http://luis-almeida.github.io/unveil/插件懒惰加载图像。但我对这种行为感到困惑：

如果我通过AJAX加载图像并将它们附加到视口中，我需要滚动网页来加载图像。除非我滚动，否则图像不会加载。

我尝试通过调用函数解决它，以便在通过.html（）写入后加载图像，但没有任何反应：

以下是我尝试使用的代码的一部分：

我重新定义了html函数，以便能够连接回调并尝试在.html（）完成后调用函数lazy_load（）。

你有什么想法，如何解决？谢谢

// create a reference to the old `.html()` function
var htmlOriginal = $.fn.html;

// redefine the `.html()` function to accept a callback
$.fn.html = function(html,callback){
  // run the old `.html()` function with the first parameter
  var ret = htmlOriginal.apply(this, arguments);
  // run the callback (if it is defined)
  if(typeof callback == "function"){
    callback();
  }
  // make sure chaining is not broken
  return ret;
}
var lazy_load = function(){
            $(document).find('img.lazy-load').unveil();
    };
products_wrapp.html(data.products_html, function(){ 
                    lazy_load();
});

完成整合：

我在jquery.js之后加载unveil插件，在</body>元素之前。

这是代码：

// I edit html function to use callback at this function...

// create a reference to the old `.html()` function
var htmlOriginal = $.fn.html;

// redefine the `.html()` function to accept a callback
$.fn.html = function(html,callback){
  // run the old `.html()` function with the first parameter
  var ret = htmlOriginal.apply(this, arguments);
  // run the callback (if it is defined)
  if(typeof callback == "function"){
    callback();
  }
  // make sure chaining is not broken
  return ret;
}

$(document).ready(function() {
   /* --------------------------------
       lazy load
       -------------------------------*/
    var lazy_load = function(){
            $(document).find('img.lazy-load').unveil();
    };
    lazy_load(); // call function for first time


    // load products, put them into products_wrapp element, after
    // html() is done -> apply lazy_load
    products_wrapp.html(data.products_html, function(){ 
                    lazy_load();
                });
}

Answer 1

unveil插件旨在在滚动时延迟加载图片。如果你看source code，就是这样设计的：

function unveil() {
  var inview = images.filter(function() {
    var $e = $(this);
    if ($e.is(":hidden")) return;

    var wt = $w.scrollTop(),
        wb = wt + $w.height(),
        et = $e.offset().top,
        eb = et + $e.height();

    return eb >= wt - th && et <= wb + th;
  });

  loaded = inview.trigger("unveil");
  images = images.not(loaded);
}

如果你想加载剩下的图像而不是等待滚动，你可以简单地手动触发它们：

$("img").trigger("unveil");

jQuery在通过ajax添加的viewport中显示加载图像

1 个答案: