スクリプトはウェブサイト上では動作しませんが、JsBin、Jsfiddleで1回の更新後に作業します

これは300px以上の画像を見つけ、段落にURLを表示するシンプルなjqueryスクリプトです。そして、このコードはjsbinのようなオンラインエディタサイトで動作しますが、同じコードはウェブサイトでは動作しません。スクリプトはウェブサイト上では動作しませんが、JsBin、Jsfiddleで1回の更新後に作業します

<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>

しかし、文の場合は、小なりjqueryのサインインにのみ不等号を変更した場合、そのスクリプトは、ウェブサイトやオンラインエディタの両方で動作し、あなたがそれを更新する画像のURLを毎回表示されます。

このスクリプトをいくつかのピクセルより大きいイメージURLも表示するにはどうすればよいですか？ jQueryのコードは、すぐにDOMがに画像を待たずに、それを既成れるよう実行

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

}

出典

2016-06-17 BlackFire

にスクリプトを実行：

は、私はそれがウェブサイト上でも動作可能な方法を見つけました負荷！したがって、スクリプトがそれらを検索すると、いずれの画像もheightになりません。

イメージをリフレッシュすると、イメージがキャッシュから即座にロードされ、jQueryがキャッチするタイミングになります。

各画像のonloadイベントに応じて機能をトリガーする方法については、this StackOverflow threadをご覧ください。

例えば、the jQuery documentationはloadイベントは画像がキャッシュ内にすでにある場合、火災に失敗する可能性がどのように指摘しているので、このコードは、すでに書いたコードを補完する必要があること

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

注意。

出典

2016-06-17 05:02:40

-1

https: before //ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.jsを追加してから試してみてください。

注：お使いのシステムは、インターネットに接続されているか、イメージがロードされる前に、あなたのコードが動作するjquery.min.js

出典

2016-06-17 05:07:30

リンクされたjsbinを見ると、jQueryがうまく読み込んでいることがわかります。 'src' URLに' https： 'を省略すると有効です。 [この回答]（http://stackoverflow.com/a/550073/5869747）を参照してください。 –

もちろん、//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js inspect要素から開くと、ファイルが見つかりませんでしたというエラーページが表示されます –

Have [この記事]（http://www.paulirish.com/2010/the-protocol-relative-url/）をご覧ください。スキームを指定することは "ベストプラクティス"かもしれませんが、OPの問題の原因ではありません。 –

ためのシステムファイルのURLを提供する必要があります。あなたはそれを少し遅らせるべきです。これを試してください。

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

出典

2016-06-17 05:11:34

-1

JSBinの両方のリンクのJavascriptは同じですが、違いはありません。

あなたの機能が正しくだけのようなあなたの機能に「$（ドキュメント）.ready」を追加操作したい場合： -

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

希望、両方のウェブ& JSBinため、この意志を。お読みください： - .widht（）または.height（）を呼び出すhttps://learn.jquery.com/using-jquery-core/document-ready/

出典

2016-06-17 05:23:26 Aditya

[jQueryのドキュメント]（https://learn.jquery.com/using-jquery-core/document-ready/）によると、OP（すなわち、 '$（myReadyCallback）'）の表記法は、 '$（document）.ready（myReadyCallback）'！これはOPの問題の原因ではありません。 –

をも要素に割り当てられたパディングを計算します。
エレメントからパディングを削除するか、単にエレメントからパディングを減算することができます
i。e;

削除パディング：

main > img{padding: 0;}

像高を計算し、パディングを削除：

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

});

これが役立つことを願っています。 :)

出典

2016-06-17 05:36:30 Neeraj

スクリプトはウェブサイト上では動作しませんが、JsBin、Jsfiddleで1回の更新後に作業します

答えて

関連する問題