延迟加载jQuery回调函数答案

【问题标题】：lazyload jquery callback function延迟加载jQuery回调函数
【发布时间】：2016-04-26 18:53:45
【问题描述】：

我目前在延迟加载渲染图像时调用一个函数。这工作正常。我遇到的问题是我需要在函数中访问$(this)。有没有办法将这些数据解析到函数中？

小提琴http://jsfiddle.net/DTcHh/19852/

$("img").lazyload({
  load: equalizeHeights
});

function equalizeHeights() 
{
  //var classStr = '.'+$(this).parent('div').attr('class');
  var classStr = '.my-wrapper';
  var heights = $(classStr).map(function() {
      return $(this).height();
    }).get(),
    maxHeight = Math.max.apply(null, heights);

  $('.my-wrapper').height(maxHeight);
}

【问题讨论】：

标签： javascript jquery jquery-lazyload

【解决方案1】：

您可以使用Function.prototype.bind() 附加this 的值

例子：

var obj= {
 someData: "Hello"
}

function printSomeData() {
  console.log(this.someData);
}

var customFunction = printSomeData.bind(obj);

customFunction(); //withing the function, "this" is obj, so it will print "Hello"

所以在你的情况下，我猜你可以使用类似的东西

$("img").lazyload({
  load: equalizeHeights.bind($("img"))
});

（不确定您要使用的“this”是什么）

【讨论】：

这不会绑定所有$('img)吗？我需要$(this) 的原因是因为我的目标是父类。中间只是一个基本的例子，实际上有几十张不同父类的图像都需要在类内进行均衡。
@steve 所以你指的是传递给 map() 的函数，不是吗？

【解决方案2】：

您使用的插件实际上有一个回调函数。示例：

$("img.lazy").lazyload({
    load : function(elements_left, settings) {
        console.log(this, elements_left, settings);
        $(document).trigger("something");
    }
});

在你的情况下，你会这样使用它：

演示http://jsfiddle.net/DTcHh/19856/

$("img").lazyload({
  effect: "fadeIn",
  threshold: 300,
  failure_limit: 10,
  load: function(elements_left, settings) {
    equalizeHeights(this);
  }
});

function equalizeHeights(ele) 
{
  var classStr = '.'+$(ele).parent('div').attr('class');
  var heights = $(classStr).map(function() {
      return $(this).height();
    }).get(),
    maxHeight = Math.max.apply(null, heights);

  $('.my-wrapper').height(maxHeight);
}

我认为这就是您所追求的用例。

【讨论】：