Stanowię się skrypt, w którym przychodzi ładowanie, dopóki obraz jest gotowy i tylko wtedy, gdy obraz jest w pełni załadowany, wyświetlane są hidowanie ładowania i obraz.

Ale nie dzieje się, jak planowałem, oto mój kod

HTML

<script src="jquery/jquery-1.9.1.js"></script>
<script src="loading.js"></script>
<link rel="stylesheet" type="text/css" href="loading.css"/>

<body>    
    <img id="image" src="http://www.hdwallpapers3d.com/wp-content/uploads/car11.jpg"/>
    <img id="loading" src="loading.gif"></img>
</body>

jQuery

if ($("#image").ready()) {
    // code
    $("#image").show();
} else {
    $("#image").hide();
}

if ($("#image").ready()) {
    // code
    $("#loading").hide();
} else {
    // code
    $("#loading").show();
}

CSS

#loading {
    width:200px;
    height:200px;
}

Oto skrzypce

0
user3024503 24 listopad 2013, 10:48

2 odpowiedzi

Najlepsza odpowiedź

Czy możesz tego spróbować

<script>
    function ImageLoad($this){    
     $($this).show();
     $('#loading').hide(); 
     console.log('image loaded');

}    
</script>
<img id="image" src="http://www.hdwallpapers3d.com/wp-content/uploads/car11.jpg" style="display:none;"  onload="ImageLoad(this)"/>
<img id="loading" src="http://sierrafire.cr.usgs.gov/images/loading.gif"></img>

DEMO: http://jsfiddle.net/tpbu8/1/

0
Tushar Gupta - curioustushar 24 listopad 2013, 07:06

Edytowałem prawidłowo twoją skrzypkę:

http://jsfiddle.net/tpBU8/3/

if ($("#image").ready()) {
//code
    $("#loading").hide();
    $("#image").show();
}

Uwaga: Również podczas pisania kodu jQuery nie zapomnij załadować biblioteki jquery

0
Zword 24 listopad 2013, 07:10