Skript funktioniert nicht auf der Website, sondern arbeitet an JsBin, Jfiddle nach einer Aktualisierung

Dies ist ein einfaches Jquery-Skript, das ein Bild größer als 300px findet und URL im Absatz anzeigen. Und dieser Code funktioniert auf Online-Redaktionsseiten wie jsbin, aber derselbe Code funktioniert nicht auf der Website.Skript funktioniert nicht auf der Website, sondern arbeitet an JsBin, Jfiddle nach einer Aktualisierung

<html> 

<head> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 
</head> 

<body> 
    <main> 
     <p> 
     </p> 
     <img src="http://icons.iconarchive.com/icons/icons-land/metro-raster-sport/128/Soccer-Ball-icon.png"> 
     <img src="http://www.iconarchive.com/download/i65352/icons-land/metro-raster-sport/American-Football-Ball.ico"> 
     <img src="http://simpleicon.com/wp-content/uploads/football.png"> 
    </main> 
    <script> 
     $(function() { 

      $('main img').each(function() { 
       $Height = 300; 
       if ($(this).height() > $Height) { 
        $image = $(this).attr('src'); 
        $('p').text($image); 
        return false; 
       } 
      }); 

     }); 
    </script> 
</body> 

</html>

Aber wenn Sie ändern nur das Größer-als-Zeichen auf weniger-als-Zeichen in jquery if-Anweisung, dann Skript funktioniert sowohl auf der Website und Online-Editor und zeigt Bild-URL jedes Mal wenn Sie es aktualisieren.

Wie funktioniert dieses Skript, um auch eine Bild-URL anzuzeigen, die größer als einige Pixel ist?

fand ich eine Art und Weise, die es auch auf der Website macht Arbeit: in dem Skript Laufe

$(window).on("load",function(){ 

}

Quelle

2016-06-17 BlackFire

Der jQuery-Code so schnell ausgeführt wie das DOM ist Ready- für die Bilder wartet nicht auf Belastung! Daher hat keines der Bilder eine height, wenn das Skript nach ihnen sucht.

Wenn Sie aktualisieren, werden die Bilder sofort aus dem Cache geladen, damit jQuery sie abfangen kann.

Werfen Sie einen Blick auf this StackOverflow thread für eine Idee, wie Sie Ihre Funktion als Reaktion auf jedes Bild onload Ereignis auslösen!

z.B.

$('main img').on('load', function(){ 
    if ($(this).height() > 300) 
     $('p').text($(this).attr('src')) 
    ; 
});

Beachten Sie, dass dieser Code den Code ergänzen sollten Sie bereits geschrieben haben, da the jQuery documentation weist darauf hin, wie die load Ereignis ausgelöst ausfallen können, wenn die Bilder bereits im Cache sind.

Quelle

2016-06-17 05:02:40

-1

einfach https: before //ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js hinzufügen und dann versuchen.

Hinweis: Ihr System muss mit dem Internet verbunden werden, oder für jquery.min.js Systemdatei url bieten

Quelle

2016-06-17 05:07:30

Wenn Sie auf die verknüpfte Jsbin schauen, werden Sie sehen, dass jQuery gerade gut geladen wird. Es ist zulässig, die URL "https:" in der URL "src" zu entfernen. siehe [diese Antwort] (http://stackoverflow.com/a/550073/5869747). –

natürlich, aber wenn Sie versuchen, öffnen //ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js von Inspect-Element zeigt es Fehlermeldung Seite Ihre Datei wurde nicht gefunden –

haben ein Blick auf [diesen Artikel] (http://www.paulirish.com/2010/the-protocol-relative-url/), der eigentlich dieses Beispiel diskutiert! Obwohl die Festlegung des Schemas "bewährte Verfahren" sein kann, ist dies nicht die Ursache des Problems des operationellen Programms. –

Ihr Code funktioniert, bevor Bilder geladen werden. Sie sollten es ein bisschen Verzögerung geben. Versuchen Sie dies;

$(function() { 
    setTimeout(function(){ 
    $('main img').each(function() {  
     $Height = 300; 
     if ($(this).height() > $Height) { 
      $image=$(this).attr('src'); 
      $('p').text($image); 
      return false; 
     }  
    }); 
    },150); 
});

Quelle

2016-06-17 05:11:34

-1

Javascript in beiden JSBin-Links sind gleich, es gibt keine Unterschiede.

Wenn Sie Ihre Funktion nicht richtig arbeiten nur "$ (document) .ready" add auf Ihre Funktion wie: -

$(document).ready(function() { 
$('main img').each(function() { 
    $Height = 300; 
    if ($(this).height() > $Height) { 
    $image=$(this).attr('src'); 
    $('p').text($image); 
    return false; 
    } 
}); 
});

Hoffnung, diese für beide Web & JSBin. Bitte lesen: - https://learn.jquery.com/using-jquery-core/document-ready/

Quelle

2016-06-17 05:23:26 Aditya

Laut der [jQuery-Dokumentation] (https://learn.jquery.com/using-jquery-core/document-ready/) ist die von OP verwendete Notation (dh '$ (myReadyCallback)') bereits eine Abkürzung für '$ (Dokument) .ready (myReadyCallback)'! Dies ist nicht die Ursache für das Problem des OP. –

Aufruf .widht() oder .height() berechnet auch dem Element zugeordnet Polsterung.
versuchen Sie, das Padding vom Element zu entfernen, oder Sie können das Padding einfach vom Element subtrahieren
i.e;

remove padding:

main > img{padding: 0;}

die Bildhöhe ermitteln und entfernen padding:

$(function() { 
    $img = $('main img'); 
    $img.each(function() { 
    var tp = parseInt($img.css('padding-top'), 10); 
    var bp = parseInt($img.css('padding-bottom'), 10); 
    $Height = 300; 
    if ($(this).height() - (tp + bp) > $Height) { 
     $image=$(this).attr('src'); 
     $('p').text($image); 
     return false; 
    } 
    }); 

});

Hoffe, das wird helfen. :)

Quelle

2016-06-17 05:36:30 Neeraj

Skript funktioniert nicht auf der Website, sondern arbeitet an JsBin, Jfiddle nach einer Aktualisierung

Antwort

Verwandte Themen