イメージが正常にロードされたかどうかを確認するには、jQuery ‘

load（）

‘と ‘

error（）

‘イベントを組み合わせて使用​​できます。 

$('#image1')
    .load(function(){
        $('#result1').text('Image is loaded!');
    })
    .error(function(){
        $('#result1').text('Image is not loaded!');
    });

イメージが正常にロードされた場合は、

load（）

関数が呼び出されます。そうでない場合は、

error（）

関数が呼び出されます。

自分で試してみてください

<html>
<head>

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>

 <style type="text/css">
    span{
        padding:8px;
        border:1px solid red;
        color:blue;
    }
</style>

</head>

<body>

<h1>Check if image is loaded jQuery</h1>
<p>
<img id="image1"
src="https://static.jquery.com/files/rocker/images/logo__jquery__215x53.gif"/>
<p>Load image from
"http://static.jquery.com/files/rocker/images/logo__jquery__215x53.gif"</p>

<span id="result1"></span>
</p>

<p>
<img id="image2" src="xxxx.jpg"/>
<p>Load image from "xxxx.jpg"</p>

<span id="result2"></span>
</p>

<script type="text/javascript">

$('#image1')
    .load(function(){
        $('#result1').text('Image is loaded!');
    })
    .error(function(){
        $('#result1').text('Image is not loaded!');
    });

$('#image2')
    .load(function(){
        $('#result2').text('Image is loaded!');
    })
    .error(function(){
        $('#result2').text('Image is not loaded!');
    });
</script>

</body>
</html>

リンク://wp-content/uploads/jQuery/jQuery-check-if-image-loaded.html[デモを試してください]


image


jquery