2016-04-26 6 views
0

Ich rufe derzeit eine Funktion, wenn Lazyload ein Bild gerendert hat. Das funktioniert gut. Das Problem, das ich habe, ist, dass ich auf $(this) innerhalb der Funktion zugreifen muss. Gibt es eine Möglichkeit, diese Daten für die Funktion zu analysieren?lazyload jquery Callback-Funktion

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

Antwort

0

Sie Function.prototype.bind() verwenden können, um den Wert von this

Beispiel anbringt:

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" 

Also in Ihrem Fall denke ich, Sie so etwas wie

verwenden können
$("img").lazyload({ 
    load: equalizeHeights.bind($("img")) 
}); 

(nicht sicher, was das "das" ist, das Sie verwenden möchten)

+0

Wird das nicht alle '$ (' img) 'binden? Der Grund, warum ich '$ (this)' brauche, liegt darin, dass ich auf die Elternklasse abziele. Die Idle ist nur ein einfaches Beispiel, in Wirklichkeit gibt es Dutzende von Bildern mit verschiedenen Elternklassen, die alle innerhalb der Klasse ausgeglichen werden müssen. –

+0

@steve Sie beziehen sich also auf die Funktion, die an map() übergeben wird, nicht wahr? –

0

Das Plugin, das Sie verwenden, hat tatsächlich eine Rückruffunktion. Beispiel:

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

In Ihrem Fall, dass Sie es so verwenden würde:

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

Ich gehe davon aus, dass der Anwendungsfall ist, dass Sie nach waren.