lazyload jquery回调函数

时间:2016-04-26 09:58:27

标签: javascript jquery jquery-lazyload

当lazyload渲染图像时,我当前调用了一个函数。这很好用。我遇到的问题是我需要访问函数中的$(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);
}

2 个答案:

答案 0 :(得分:0)

您可以使用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"))
});

(不确定你想要使用的“这个”)

答案 1 :(得分:0)

您使用的插件实际上具有回调功能。例如:

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

在你的情况下,你会像这样使用它:

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

我认为这是你追求的用例。