1

Galera montei um código em jQuery para realizar algumas alterações no meu layout ocultando algumas div e imprimindo a página. Ela funciona muito bem, porém estou tendo o seguinte problema.

Quando tenho imagem na minha página, o sistema imprime antes de carregar as imagens. Como faço para que so seja impresso após o carregamento total da página.

Segue meu código:

    <script>

    // Imprime a página
    window.print();

    $(document).ready(function () {
        var beforePrint = function () {

            // Remove o loading
            $(".se-pre-con").hide();

            // Remove Menu topo
            $(".header").hide();
            $('body').css({"padding-top": "0px"});
        };
        var afterPrint = function () {
            // Redireciona página
            window.location = 'www.google.com.br';
        };

        if (window.matchMedia) {
            var mediaQueryList = window.matchMedia('print');
            mediaQueryList.addListener(function (mql) {
                if (mql.matches) {
                    beforePrint();
                } else {
                    afterPrint();
                }
            });
        }

        window.onbeforeprint = beforePrint;
        window.onafterprint = afterPrint;
    }());
</script>

_______________________________ Estou tentando assim ______________________

    <script>

    var root = this;

    $(document).ready(function () {

        var beforePrint = function () {

            // Remove o loading
            $(".se-pre-con").hide();

            // Remove Menu topo
            $(".header").hide();
            $('body').css({"padding-top": "0px"});
        };
        var afterPrint = function () {
            // Redireciona página
            window.location = 'google.com';
        };

        if (window.matchMedia) {
            var mediaQueryList = window.matchMedia('print');
            mediaQueryList.addListener(function (mql) {
                if (mql.matches) {
                    beforePrint();
                } else {
                    afterPrint();
                }
            });
        }

        window.onbeforeprint = beforePrint;
        window.onafterprint = afterPrint;

        /* Imprime a página */
        root['print']();
    });

</script>

2 Respostas 2

2

É só parar de chamar a função que você declarou no primeiro parâmetro de $.fn.ready. E agora você poderia chamar this.print no bloco dessa função.

No jQuery, esse evento "ready" acontece quando cada elemento de uma lista do jQuery tem sua propriedade readyState atribuida com "complete" (eu creio) – esse evento ao lado do document seria como esperar todo o conteúdo da página ser carregado e interpretado pelo navegador.

Lembrando, também existe o método $.fn.on(event, callback) para definir eventos no jQuery, se você preferir.

Também é possível você chamar o próprio jQuery para definir esse evento somente com o document: $(callback), mais informações.

Edit: Até o evento "ready" do jQuery ser executado, suas imagens serão carregadas, mas não será possível saber se vão estar renderizadas na mesma hora. Para executar print você pode fazer um atraso com ajuda de requestAnimationFrame ou setTimeout. requestAnimationFrame seria ideal já que executa enquanto a página está ativa.

Eu acabei de criar uma interface que usa requestAnimationFrame ou setTimeout para criar um atrasador com evento de contagem. Você pode forçar ele à não usar requestAnimationFrame. Quando requestAnimationFrame não é suportado a interface usa setTimeout para executar um atrasador.

Então aqui vai um exemplo com o uso dessa interface:

/*! Delayer.js */
;(function(a){"use strict";function c(a,c){var d=a[c];if(!d&&(c=c.charAt(0).toUpperCase()+c.substring(1)))for(var e=0,f=b.length;e<f&&!(d=a[b[e]+c]);++e);return d}function j(a,b){for(var c=0,d=a.events[b].length;c<d;++c){var e=a.events[b][c];e.call(e.target)}}function k(a){a.tId=d(function(){k(a)}),(a._elapsed=(a._now=f())-a._then)>a.wait&&(a._then=a._now-a._elapsed%a.wait,j(a,"count"))}function l(a){a.tId=setTimeout(function(){a.isRunning&&(j(a,"count"),l(a))},a.wait)}function m(a){for(var b,c=0,d=h.length;c<d;++c)if(h[c].identifier===a){b=h[i=c];break}return b}function n(){var b,a=h.length-1;if(a<0)b=0;else if(0===a){for(var c=0,d=h[0].identifier;c===d;++c);b=c}else for(var c=0;c<=a;++c)if(c>=a)b=c+1;else if((b=h[c].identifier+1)<h[c+1].identifier)break;this.identifier=b,g(this),h.push({delay:18,events:{count:[]},forceRAF:!0,identifier:b})}var i,b=["webkit","moz","ms"],d=c(a,"requestAnimationFrame"),e=c(a,"cancelAnimationFrame")||c(a,"cancelRequestAnimationFrame"),f="object"==typeof a.performance&&performance.now?function(){return performance.now()}:function(){return(new Date).getTime()},g="function"==typeof Object.defineProperty?function(a){var b=a.identifier;Object.defineProperty(a,"identifier",{value:b,writable:!1})}:Function.prototype,h=[];n.prototype={animation:function(a){var b=m(this.identifier);return"boolean"==typeof a&&(b.forceRAF=a,b.isRunning&&(b.stop(),b.start())),this},count:function(a){return"function"==typeof a&&this.on("count",a),this},delay:function(a){var b=m(this.identifier);return"number"==typeof a?(b.wait=a,b.isRunning&&(b.stop(),b.start()),this):b.wait},dismantle:function(){return this.stop(),h.splice(i,1),h.sort(function(a,b){return a.identifier-b.identifier}),!0},on:function(a,b){if(b.target=this,"function"==typeof b){for(var c=m(this.identifier),d=a.split(" "),e=0,f=d.length;e<f;++e){var g;typeof(!(g=c.events[d[e]])instanceof Array)&&(g=c.events[d[e]]=[]),g.push(b)}return this}},start:function(){var a=m(this.identifier);return a.isRunning=!0,(a.isUsingRAF=a.forceRAF&&"function"==typeof d)?(a._then=f(),k(a)):l(a),this},stop:function(){var a=m(this.identifier);return a.isRunning&&((a.isUsingRAF?e:clearTimeout)(a.tId),a.isRunning=!1),this}};var o=function(){return new n};"object"==typeof a.module&&module.exports?module.exports=exports=o:a.Delayer=o})(this);

var root = this

$(document).ready(function () {

    Delayer()

        .count(function() {
            /* Desmonta o atrasador. */
            this.dismantle()
            /* Imprime a página. */
            root.print()
        }

        .delay(500) // Esperaremos 500ms.
})

Em jQuery fazem algo um pouco similiar à isso para executar o evento $.fn.ready de cada elemento em uma lista (baseando em alguns posts do SOen),

;(function() {

    var isDocLoaded

    (isDocLoaded = function() {
        document['readyState'] === "complete" && callback()
    })()

    document['onreadystatechange'] = isDocLoaded

})();

Na verdade nem todo elemento tem a propriedade readyState. Alguns tem, como o HTMLAudioElement, HTMLVideoElement, etc, mas Image/HTMLImageElement tem eventos como "load" que podem acabar não acontecendo se o evento for definido depois de o recurso requisicionado carregar.

5
  • Bom tentei fazer da forma que vc explicou aqui, e não esta funcionando, poderia me dar um exemplo com o meu código? quebrei a cabeça aqui e não da certo, ele imprime mas continua sem carregar as imagens Commented 14/09/2016 às 11:02
  • Não estou carregando ele no html mesmo. Vou editar minha pergunta para vc poder ver estou tentando ok Commented 14/09/2016 às 11:11
  • Olha troquei o root['print'](); por setTimeout(root.print, 1); o unico problema e que ele leva 1 segunda para mandar o comando de imprimir. Commented 14/09/2016 às 11:32
  • bom o requestAnimationFrame(root.print) não funcionou, simplesmente não imprime. bom acho que o setTimeout(root.print, 300) não fica funcional para quem tem internet lenta, imagina se passa de 300ms e a imagem ainda não carregou. Vai dar problema certo. Commented 14/09/2016 às 11:43
  • Atualizei a resposta. E, não, isso não depende da internet, as imagens já vão ter carregado antes de o callback do evento "ready" executar.
    – user37626
    Commented 14/09/2016 às 12:13
0

Vou sugerir uma outra aproximação pra esse problema, que envolve o uso do evento load. Apesar de o evento ready garantir que toda a estrutura do DOM já esteja construída, ele não garante que todos os assets (imagens, CSS e por aí vai) já foram totalmente carregados. Você pode fazer

$(document).on('load', function()){
    window.print();
}

para garantir que a instrução de impressão seja apenas disparada quanto as imagens já estiverem carregadas. Esta resposta do SO gringo fala sobre a diferença dos 2 eventos.

Quanto à esconder algumas coisas na versão de impressão (que eu acredito que é o que o resto do seu método faz), basta criar uma media query (no seu arquivo .css, se é que ele existe) para impressão, da seguinte maneira:

@media print{
    .se-pre-con, header{
        display: none;
    }
    body{
        padding-top: 0;
    }
}

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .