Kraft-DOM neu zeichnen mit javascript on demand

Den Titel der Frage drückt aus, was ich denke, das ist die entscheidende Frage, die hinter meinem speziellen Fall.

Meinem Fall:
Innerhalb einer Klick-Prozedur, ich möchte ein Bild sichtbar (eine "laden" - animation), direkt vor einer busy-Funktion startet. Dann möchte ich es wieder unsichtbar, nachdem die Funktion beendet ist.
Anstelle von dem, was ich erwartet habe merke ich, dass das Bild nie sichtbar wird. Ich denke mal, dass das aufgrund der browser wartet der handler zu Ende, bevor Sie es tun können, jedem Neuzeichnen (ich bin sicher, es gibt gute performance-Gründe).

Den code (auch in diesem fiddle: http://jsfiddle.net/JLmh4/2/)

html:

<img id="kitty" src="http://placekitten.com/50/50" style="display:none">
<div><a href="#" id="enlace">click to see the cat</a> </div>

js:

$(document).ready(function(){
    $('#enlace').click(function(){
        var kitty = $('#kitty');
        kitty.css('display','block');

        //see: http://unixpapa.com/js/sleep.html
        function sleepStupidly(usec)
        {
            var endtime= new Date().getTime() + usec;
            while (new Date().getTime() < endtime)
                ;
        }

        //simulates bussy proccess, calling some function...

        sleepStupidly(4000);

        //when this triggers the img style do refresh!
        //but not before
        alert('now you do see it');

        kitty.css('display','none');
    });
});

Habe ich die alert Anruf direkt nach der sleepStupidly Funktion zu zeigen, dass in diesem moment der Ruhe, der browser neu gezeichnet, aber nicht vorher. Ich unschuldig erwartet, dass es neu gezeichnet, rechts nach der Einstellung die 'display' auf 'block';

Für die Aufnahme, ich habe auch versucht Anhängen von html-tags oder durch austauschen von css-Klassen, anstatt das Bild ein-und ausblenden in diesem code. Gleichen Ergebnis.

Nach all meinen Recherchen glaube ich, dass das, was ich bräuchte, wäre die Fähigkeit, zwingen Sie den browser neu und halt alles andere, was bis dahin.

Ist es möglich? Ist es möglich in einer crossbrowser Weg? Einige plugins habe ich nicht finden können, vielleicht...?

Dachte ich, dass vielleicht so etwas wie "jquery css callback' (wie in dieser Frage: In JQuery, Ist es möglich die callback-Funktion nach der Einstellung, die neue css-Regel?) würde den trick tun ... aber das gibt es nicht.

Habe ich auch versucht, separte die zeigen, Funktionsaufruf und versteckt sich in verschiedene Handler für dasselbe Ereignis ... aber nichts. Auch das hinzufügen einer setTimeout Verzögerung der Ausführung der Funktion (wie hier empfohlen: Kraft-DOM in JavaScript aktualisieren).

Dank und ich hoffe, dass es auch anderen hilft.

javier

BEARBEITEN (nachdem Sie meine bevorzugte Antwort):

Nur weiter zu erklären, warum ich ausgewählt das Fenster.setTimeout Strategie.
In meiner realen Anwendungsfall habe ich realisiert, dass es um die browser-Zeit genug, um das Neuzeichnen der Seite, ich musste es über 1000 Millisekunden (viel mehr als die 50 für den fiddle-Beispiel). Das glaube ich, ist durch eine tiefere DOM-Baum (in der Tat, unnötig tief).
Die setTimeout lassen Weise können Sie das tun.

Nicht window.setTimeout() helfen?
Es sollte nicht notwendig sein, um längere timeout-Verzögerung. Was Sie brauchen, ist wahrscheinlich nur zum laden Sie Ihr Bild, um in der Lage sein zu zeigen, es sofort.
Ich sehe. Aber ich verstehe, dass wäre der Fall, wenn das Bild nicht geladen, aus der start vom browser (was sinnvoll wäre, da es display:none, denke ich). Das ist nicht der Fall, zumindest mit chrome, der hat laden Sie das Bild von der sehr Anfang (gesehen mit den Entwickler-tools). Ich denke immer noch, ist aufgrund der legacy-markup, mit der ich arbeite (eine Menge von eingebetteten Tabellen, wirklich ... nicht von mir abhängig!). Eigentlich firefox macht es besser (braucht weniger Zeit)... macht es Sinn? nochmals vielen Dank. Grüße

InformationsquelleAutor javigzz | 2013-06-01

Verwenden window.setTimeout() mit einigen kurzen unmerklichen Verzögerung zu langsam laufen Funktion:

$(document).ready(function() {
    $('#enlace').click(function() {
        showImage();

        window.setTimeout(function() {
            sleepStupidly(4000);
            alert('now you do see it');
            hideImage();
        }, 50);
    });
});

Live-demo

InformationsquelleAutor Marat Tanalin

JQuery show und ausblenden Rückrufe (oder andere Art der Darstellung so etwas wie fadeIn/fadeOut).

http://jsfiddle.net/JLmh4/3/

$(document).ready(function () {
    $('#enlace').click(function () {
        var kitty = $('#kitty');


        //see: http://unixpapa.com/js/sleep.html
        function sleepStupidly(usec) {
            var endtime = new Date().getTime() + usec;
            while (new Date().getTime() < endtime);
        }

        kitty.show(function () {

            //simulates bussy proccess, calling some function...
            sleepStupidly(4000);

            //when this triggers the img style do refresh!
            //but not before
            alert('now you do see it');

            kitty.hide();
        });
    });
});

Vielen Dank für deine Antwort, das funktioniert auch für den Fall, dass ich vorgeschlagen habe. Deshalb habe ich mich auch von Ihnen positiv bewertet werden Sie (hoffe nicht gegen die Regeln!). Ich wählte die Antwort von Marat, weil es für mich besser für meine 'echten Fall' das ist ein bisschen komplizierter. Daher denke ich, ist mehr allgemein. Grüße

InformationsquelleAutor sdespont

3

Neuzeichnen zu erzwingen, die Sie verwenden können, offsetHeight oder getComputedStyle().
```
var foo = window.getComputedStyle(el, null);
```
oder
```
var bar = el.offsetHeight;
```
"el" als ein DOM-element

InformationsquelleAutor ronnykaram
0

Ich weiß nicht, ob das funktioniert in deinem Fall (so habe ich es nicht getestet), aber beim manipulieren von CSS mit JavaScript/jQuery ist es manchmal notwendig, um Kraft Neuzeichnen von einem bestimmten element, um die änderungen wirksam werden.

Dies geschieht einfach durch das anfordern einer CSS-Eigenschaft.

In deinem Fall würde ich versuchen, eine kitty.position().left; vor dem Aufruf der Funktion vor Unordnung mit setTimeout.

InformationsquelleAutor Michael Trojanek
0

Was für mich gearbeitet ist die Einstellung der folgenden:
```
$(element).css('display','none'); 
```
Danach können Sie tun, was Sie wollen, und schließlich Sie tun möchten:
```
$(element).css('display','block');
```
InformationsquelleAutor user3177944

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.