Wie Bildgröße des Bildes durch Lazy Load laden

Question

Ich benutze Lazy Load Plugin (jquery.lazyload.js) und ich versuche, die Bildgröße, die es lädt. So in dem Anzeigeteil habe ich:

echo '<img #img id="img-' . $i . '" name="' . $filename . '" class="lazy" data-original="'.$image.'" />'; 

Java Script:

<script type="text/javascript">  
    displaysize(img) { 
     console.log(img.clientWidth, img.clientHeight); 
    }   

</script> 


<script src="js/rectangle3.class.js"></script> 

HTML:

<div id="imgsize"> 
    <p id='imgsize-debug'></p> 
    <button id='map-download-btn' onclick='displaysize();'>Image size:</button> 
    <div id='imagesize'></div> 
</div> 

Die Bildanzeige ist in Ordnung, aber wenn ich hinzufügen Displaysize (img) -Funktion Das Skript und der Button laden die Seite weiter. Ich muss die Bildgröße für die Berechnung in meinem Java-Script-Datei erhalten,

document.getElementById("rectRecord-" + this.rectPointer).innerHTML = 
     "Rectangle " + (this.rectPointer + 1) + " (" 
     + this.startX + ", " 
     + this.startY + ", " 
     + this.endX + ", " 
     + this.endY + ")" 

Notwendigkeit zu ändern:

document.getElementById("rectRecord-" + this.rectPointer).innerHTML = 
     "Rectangle " + (this.rectPointer + 1) + " (" 
     + (this.startX)/width + ", " 
     + (this.startY)/height + ", " 
     + (this.endX-this.startX)/width+" , " 
     + (this.endY-this.startY)/height +"" 

Answer 1

Finnaly Ich habe es geschafft, die Breite und Höhe des Bildes zu finden, da es das übergeordnete Element des von mir erstellten Rechtecks ​​ist. So in der JavaScript-Datei werde ich verwenden:

var options = { 
      width: $('#' + rectangles[rectPointer].rectangleDiv.id).parent().width() + 1, 
      height: $('#' + rectangles[rectPointer].rectangleDiv.id).parent().height() - 3 
     }; 

Dann Breite und Höhe erhalten von:

(options.width ||rectangles[rectPointer].startX) + " " 

options.height ||rectangles[rectPointer].startY 

dann für meine Berechnung:

Rectangle.prototype.updatePosition = function (data, options) { 
    this.startX = data.newStartX; 
    this.startY = data.newStartY; 
    this.endY = parseFloat(this.startY) + parseFloat(this.rectangleDiv.style.height); 
    this.endX = parseFloat(this.startX) + parseFloat(this.rectangleDiv.style.width); 

    console.log("END: " 
     + parseFloat(this.startY) + parseFloat(this.rectangleDiv.style.height) + " - " + parseFloat(this.startX) + parseFloat(this.rectangleDiv.style.width)); 

    document.getElementById("rectRecord-" + this.rectPointer).innerHTML = 
     "Rectangle " + (this.rectPointer + 1) + " (" 
     + (options.width || this.startX) + ", " 
     + (options.height || this.startY) + ", " 
     + (this.startX)/(options.width || this.startX) + ", " 
     + (this.startY)/(options.height || this.startY) + ")" 
; 

Dank aller für Ihre Hilfe! Ich habe Punkte für alle gutgeschrieben, konnte sie aber nicht als Antwort akzeptieren, da sie nicht wirklich genutzt werden, um mein Problem zu lösen.

Answer 2

Wie ich in den Kommentaren gesagt, müssen Sie das Bild an die Funktion übergeben um die Breite/Höhe zu holen. In diesem Beispiel können Sie auf das Bild klicken, um die Größe zu erhalten.

Um eine Schaltfläche zu verwenden, müssen Sie einen Selektor verwenden, um das richtige Bild auszurichten, dessen Abmessungen Sie möchten.

function displaysize(img) { 
 
    console.log(img.clientWidth, img.clientHeight); 
 
} 
 

 
$(function() { 
 
    $("img.lazy").lazyload(); 
 
    
 
    $(document).on('click', '.lazy', function() { 
 
     displaysize($(this)[0]); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery_lazyload/1.9.7/jquery.lazyload.js"></script> 
 

 
<img class="lazy" data-original="http://appelsiini.net/img/bmw_m1_hood.jpg" />

Answer 3

Wenn die Taste in Bezug auf Ihre faul geladenen Bildanzeigegröße? Hat jedes Lazy-Load-Bild eine Schaltfläche für die Anzeigegröße oder gibt es nur ein Lazy Loaded-Bild?

Ihr Problem ist, dass Ihre Methode displaysize einen Parameter namens img verwendet, aber Sie übergeben keinen Parameter, wenn Sie die Funktion bei Klick aufrufen.

Sie müssen also etwas an diese Anzeigegröße Methode übergeben, die es auf das richtige Bild zeigen wird.

Ihres Bildes ist wie diese in Bezug auf Ihre Schaltfläche:

<img id="lazyLoadedImage" /> 
<div id="imgsize"> 
    <p id='imgsize-debug'></p> 
    <button id='map-download-btn' onclick='displaysize("lazyLoadedImage");'>Image size:</button> 
    <div id='imagesize'></div> 
</div> 

displaysize(imgID) { 

      console.log(document.getElementById(imgID).width + ","+ document.getElementById(imgID).height); 
    }   

Wenn Sie nicht über einen statischen Satz wie folgt auf die Fragen je haben bis ich am Anfang gefragt, hier werden Sie diesen Code einstellen müssen, um . Wie dem auch sei, Sie können dies tun, indem Sie eine tatsächliche Referenz des Bildes, das Sie untersuchen möchten, an Ihre Bildgrößenmethode übergeben.

Answer 4

Nach verzögertes Laden Plugin Website Sie Bildabmessungen festlegen müssen vor dem Laden des Bildes:

PRO TIP! Sie müssen Bilddimensionen entweder als Attribute für Breite und Höhe oder in CSS festlegen. Andernfalls funktioniert das Plugin möglicherweise nicht richtig.

Ich sehe, Sie sind mit PHP, so können Sie versuchen, Breite und Höhe zu setzen, wie in this answer beraten.

Sie können auch eine ID zu Ihren Bildern hinzufügen, um den Javascript-Aufruf von der Schaltfläche einfacher zu machen.