Visualizzazione dei risultati da 1 a 3 su 3
  1. #1

    fade, immagine e caricamento

    Ciao a tutti.

    Senza volermi complicare la vita con script.aculo.us che mi pare ottimo, ma eccessivo per quel che serve a me, vorrei sapere da voi, se e come posso fare (è da un po che non uso js e ho perso molte cognizioni) per eseguire il fade di un div, controllare l'effettivo caricamento di un 'immagine.

    Sopratutto su quest'ultimo punto ho delle domande:

    posso controllare il completo caricamento di un'immagine, presente in una pagina html solo come background di un div?
    oppure controllarne il caricamento senza avere l'immaigne nella pagina, ma solo nello script js.

    In pratica mi serve per controllare il caricamento di un bg di un div e quando l'immagine si è caricata, nascondere il contenuto html del div, tramite un fade, e visualizzare quindi l'immagine.

    Troppo complicato? o parto da presupposti sbagliati.

    L'ho visto fare con script.aculo.us , ma se provo a copiarne il funzionamento.... guarda un po, non mi funziona.

    Che dite voi?

    grazie

  2. #2
    posso controllare il completo caricamento di un'immagine, presente in una pagina html solo come background di un div?
    se magari è definito in un foglio di stile, mi sà che è un pò difficile...(xò nn ne sono sicuro)..

    oppure controllarne il caricamento senza avere l'immaigne nella pagina, ma solo nello script js.
    Certo...
    io ho fatto una cosa simile, ho un div con una scritta "Caricamento in corso", mi carico le immagini trammite js e poi quando le ho caricate tutte, le faccio apparire con effetto fade-in..
    Cmq nel tuo caso devi soltanto cambiare i parametri della funzione, invece che partire da 0 a 100, da 100 a 0, in modo che scompaia il div.
    Le due funzioni per far scomparire il tuo div con effetto fade-out:
    codice:
    /* Parametri: id:id del tag che vuoi far appparire
    opacStart: opacità iniziale (nel tuo caso 100)
    opacEnd: opacità finale (nel tuo caso 0)
    sec: durata dell'effetto
    */
    // Cambio Opacità
    function opacity(id, opacStart, opacEnd, sec) {
    	//calcolo la velocità di aggiornamento
    	var speed = Math.round(sec*10);
    	var timer = 0;
    	//determino la direzione del cambio
    	if(opacStart > opacEnd) {
    		for(i = opacStart; i >= opacEnd; i--) {
    					setTimeout("changeOpac(" + i + ",'" + id + "')",(timer*speed));
    					timer++;}
    	} else if(opacStart < opacEnd) {
    		for(i = opacStart; i <= opacEnd; i++){
    						setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
    						timer++;}
    	}
    }
    //cambio dei parametri di opacità per i diversi browser
    function changeOpac(opacity, id) {
    	var object = document.getElementById(id).style; 
    	object.opacity = (opacity / 100);
    	object.MozOpacity = (opacity / 100);
    	object.KhtmlOpacity = (opacity / 100);
    	object.filter = "alpha(opacity=" + opacity + ")";
    }
    naturalmente prima devi gestire il caricamento dell'immagine:
    codice:
    var t=new Image();
    t.src='tuaImmagine.jpg';
    t.onload=function(){opacity('idDelDiv',100,0,7000);}

  3. #3
    grazie.
    ora dopo un po di prove, mentre aspettavo ci sono riuscito con script.aculo.us ma se riesco a ottenre lo stesso con il tuo script, è decisamente più leggero, anche perchè a me serve solo per quello.

    Grazie ancora

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.