Elektroda.pl
Elektroda.pl
X
Proszę, dodaj wyjątek www.elektroda.pl do Adblock.
Dzięki temu, że oglądasz reklamy, wspierasz portal i użytkowników.

[JavaScript] + [PHP] - Jak zrobić obrazek w miejscu innego obrazka

adam220 25 Mar 2015 14:07 588 7
  • #1 25 Mar 2015 14:07
    adam220
    Poziom 14  

    Witam,
    mój skrypt ma obrazek generowany na podstawie danych z odległej bazy.
    Komunikacja z tą bazą trwa długo i dlatego miejsce na obrazek pozostaje puste przez kilkanaście sekund.
    Chciałbym aby w tym miejscu początkowo wyświetliła sie inna grafika, np z napisem "czekaj trwa ładowanie danych ".
    Ale jak to zrobić?
    Mój skrypt odwołuje się do skryptu generującego obrazek (w jednokomórkowej tabelce) tak:

    Code:
    echo "<TABLE border='0' width=470 height=290 bgcolor='white'>";
    
    echo "<TR><TD>";
    echo "<IMG src='wykres2.php?' border='0'>" ;
    echo "</TD></TR>";
    echo "</TABLE>";


    Oczywiście po wygenerowaniu się docelowego obrazka, tymczasowy ma być zamieniony.

    0 7
  • #2 25 Mar 2015 14:29
    anonim206
    Poziom 13  

    W tej linijce musisz dodać id do elementu

    Code:

    echo "<IMG id=\"obrazek\" src=\"jakis obrazek\" border='0'>" ;

    oraz dodać taki kod do swojego dokumentu
    najlepiej na koniec
    Code:

    <script>
    var img = new Image();
    img.onload = function() {
      var DOMImg = document.getElementByID('obrazek');
      DOMImg = 'wykres2.php?';
    }
    img.src = 'wykres2.php?';
    </script>

    Tworzysz tutaj nowy obrazek i ustawiasz jego zawartosć(img.src =) po czym JS wywołuje funkcje onload gdy pobierze cały obrazek i podmienia obrazek na stronie

    0
  • #3 25 Mar 2015 15:11
    adam220
    Poziom 14  

    Coś mi nie działa:
    Obrazek tymczasowy się pokazuje ale ten docelowy go wcale nie podmienia...
    Czy mógłbyś linia po linii wyjaśnić początkującemu ten JS?

    Code:
    <script>
    
    var img = new Image(); //utwórz obiekt?
    img.onload = function() { //jak sie załaduje to wykonaj
      var DOMImg = document.getElementByID('obrazek'); // ???
      DOMImg = 'wykres2.php?'; //???
    }
    img.src = 'wykres2.php?';
    </script>


    Poczytałem o modelu DOM...
    Coś tu podobno obserwuje zdarzenie onload
    jak się to zdarzy to zadziała blok w {}
    ale kiedy wykona się przypisanie img.src = 'wykres2.php?' ?
    niestety obiektowego programowania nie znam ale prosze wyjasnij krótko o co chodzi.

    0
  • #4 25 Mar 2015 15:23
    anonim206
    Poziom 13  

    Code:

    var img = new Image();//Tworzymy sobie obiekt IMG
    /*do zdarzenia onload przypisujemy funkcje wykona sie ona po zaladowaniu obrazka*/
    img.onload = function() {
        /*Tworzymy zmienna DOMImg w ktorej bedziemy "przechowywac Element" z DOMU, funkcja getElementById zworci nam ten obiekt, przyjmuje ona jako parametr ID elementu dlatego do <img> musielismy dodac tag id*/
      var DOMImg = document.getElementById('obrazek');
      /*podmieniamy adres obrazka na adres tego ktory sie juz dociagnal z sieci*/
      DOMImg.src = 'wykres2.php?';
    }
    //przypisujemy nasz obrazek do nowego obiektu
    img.src = 'wykres2.php?';

    wkradły się dwa błędy
    tutaj działający przykład
    https://jsfiddle.net/k8krmnto/

    0
  • #5 25 Mar 2015 16:04
    adam220
    Poziom 14  

    Działa:)
    Dzięki za wyjaśnienie.
    Jednak muszę się wczytać w tę "obiektówkę"
    bo niefajnie powtarzać cudzy kod bez całkowitego zrozumienia...

    Pytanie dodatkowe:
    Jak zmodyfikować kod gdy skrypt obrazka wywoływany z parametrami get

    Code:
    echo "<IMG src='wykres2.php?days=$days'"


    Czy zapis:

    Code:
    img.src = 'wykres2.php?days=<?$days?>'


    jest poprawny? bo cos nie chce działać...

    0
  • #6 25 Mar 2015 16:07
    anonim206
    Poziom 13  

    najlepiej i najpoprawniej zapisać to tak:

    Code:

    echo '<IMG src="wykres2.php?days='.$days.'"';

    0
  • #7 25 Mar 2015 16:49
    adam220
    Poziom 14  

    nie działa...
    chyba brakuje znaku > zamykającego
    chyba powinno byc tak:

    Code:
    <?echo '<IMG src="wykres2.php?days='.$days.'">';  ?>

    ale też nie działa...

    A tak w ogóle czy znaków " umieszczonych wewnątrz ' nie trzeba poprzedzać \
    jak mi niedawno napisałeś? Przemienne używanie " i ' wystarcza?

    0
  • Pomocny post
    #8 25 Mar 2015 17:05
    anonim206
    Poziom 13  

    racja zapomniałem o ">" generalnie lepiej w PHP stosować ' bo jest to szybsze a czemu to odsyłam już do kursów PHP.
    \' stosujesz jeśli miedzy ' ' chcesz wstawić znak ' a \" jeśli " ". Proponuje przejrzeć jakąś dobrą książkę o PHP bądź kurs w internecie, rozwieje to większość twoich pytań :)

    0