Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: ładowanie obrazka
Forum PHP.pl > Forum > Po stronie przeglądarki
Rastman
24.05.2005, 21:03:04
Mam proste pytanko. Na stronce będę miał jeden większy obrazek JPG. Chciałbym ,żeby obrazek ładował się na końcu i podczas ładowania wyświetlił się np:napis "ładowanie grafiki". Nie znam za bardzo JS. Jakies podpowiedz?
revyag
25.05.2005, 11:07:34
Możesz użyć xmlHTTPRequest. Obrazek wsadzasz do innego pliku np. img.html
[HTML] pobierz, plaintext 
  1. <img src="obrazek.jpg" />
[HTML] pobierz, plaintext

W pliku index.html załatwiasz resztę:
Kod
<script type="text/javascript">
function getHTTPObject() {
  var xmlhttp;
  /*@cc_on
  @if (@_jscript_version >= 5)
    try {
      xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
      try {
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
      } catch (E) {
        xmlhttp = false;
      }
    }
  @else
  xmlhttp = false;
  @end @*/
  if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
    try {
      xmlhttp = new XMLHttpRequest();
    } catch (e) {
      xmlhttp = false;
    }
  }
  return xmlhttp;
}

function loadImg(){
    var xmlhttp = getHTTPObject();
    var area = document.getElementById("obrazek");
    
    area.innerHTML = "<p>Ladowanie obrazka.....</p>";
    xmlhttp.open("GET","img.html");
    
    xmlhttp.onreadystatechange = function() {
        if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
            area.innerHTML = xmlhttp.responseText;
        }
    }
    xmlhttp.send(null);
}
</script>

[HTML] pobierz, plaintext 
  1. <div id="obrazek">
  2.  
  3. </div>
  4. <script type="text/javascript">loadImg()</script>
[HTML] pobierz, plaintext

Minus tego rozwiązania jest taki że jak ktoś ma js wyłączone to będzie problem snitch.gif
Rastman
25.05.2005, 19:04:20
dzięki, jeszcze tylko przetrawię kod i mogę sie brać do roboty
Zajec
25.05.2005, 20:22:50
Cytat(revyag @ 2005-05-25 11:07:34)
Minus tego rozwiązania jest taki że jak ktoś ma js wyłączone to będzie problem snitch.gif

A to nie opiera się przypadkiem o wtyczkę ActiveX?
FiDO
25.05.2005, 23:28:36
Mnie sie wydaje, ze Ajax to armata na mrowke w tym przypadku... przekombinowanie.. Mozna to przeciez zrobic prosciej:
[HTML] pobierz, plaintext 
  1. <?xml version="1.0" encoding="iso-8859-2" ?>
  2. <!doctype html public "-//W3C//DTD XHTML 1.1//EN"
  3.     "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  4. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
  5. <head>
  6.   <title></title>
  7.   <meta http-equiv="Content-type" content="text/html; charset=iso-8859-2" />
  8.   <script language="JavaScript" type="text/javascript">
  9.   <!--
  10.  
  11.   var img_src = "test.jpg";
  12.  
  13.   function loadImg(target)
  14.   {
  15.         var img = new Image();
  16.  
  17.     img.onload = function(e) {
  18.       var im = document.createElement('IMG');
  19.       var obj= document.getElementById(target);
  20.       im.src = this.src;
  21.       obj.innerHTML = '';
  22.       obj.appendChild(im);
  23.     }
  24.     img.src = img_src;
  25.   }
  26.   //-->
  27.   </script>
  28. </head>
  29. <body onload="loadImg('obrazek');">
  30.  
  31. <div id="obrazek">
  32. Trwa ładowanie <strong>obrazka</strong>, proszę czekać...
  33. </div>
  34.  
  35. </body>
  36. </html>
[HTML] pobierz, plaintext
Rastman
27.05.2005, 18:40:16
no właśnie to będzie tylko jeden obrazek
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.