Jump to content
Pitag346

Carregamento de imagem

Recommended Posts

Olá pessoal, tudo bem? 

Estou com uma dúvida bem bobinha... mas gostaria que me ajudassem a solucionar.

 

Alguns sites utilizam uma forma de carregar as imagens deixando elas embaçadas/desfocadas. Até que são carregadas e elas aparecerem normalmente...

 

Exemplo básico seria esse site: https://www.redbull.com/br-pt/athletes

 

Sabem me explicar como isso é feito, e pra que ? Meu site usa bastante imagens, gostaria de saber se tem algum benefício ou se seria somente estética ... Obrigado! 

 

(Não sei se isso é feito em JavaScript, acredito que sim... perdão se publiquei na área errada).

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By daviassumpcao
      Estou buscando uma orientação ou referência para desenvolver algo similar ao formulário dessa página do iPhone https://www.apple.com/shop/buy-iphone/iphone-se ... quando selecionamos alguma opção, a div que contém o formulário centralizar na página e rola feito um carrossel. Estou completamente perdido com essa demanda que recebi... agradeço antecipadamente a todos que derem uma força. Abraço
    • By Wallcrawler
      Olá pessoal tudo bem? Estou tentando fazer a cópia de uma imagem que está disponível na web e salvar em uma pasta no meu projeto. Essa imagem está sob protocolo SSL mas navegador consegue acessá-la normalmente. Mas o meu script php é bloqueado, e não entendo o porquê.
       
      Segue o código que estou usando:
      <?php //error_reporting(E_ALL ^ E_DEPRECATED); //ini_set('display_errors', 1); //die('Script travado!'); $start = microtime(true); set_time_limit(0); function save_image($inPath,$outPath) { //Download images from remote server $in = fopen($inPath, 'rb'); $out = fopen($outPath, 'wb'); while ($chunk = fread($in,8192)) { fwrite($out, $chunk, 8192); } fclose($in); fclose($out); } include_once ($_SERVER['DOCUMENT_ROOT'] . '/grpi/include/classes/Rpi.class.php'); include_once ($_SERVER['DOCUMENT_ROOT'] . '/grpi/include/functions.class.php'); $func = new FuncoesAuxiliares(); $rpi = new Rpi(); if(!isset($_GET['num_processo'])) { $rows = $rpi->Consulta('select num_processo, classe, especificacao from processos order by num_processo ASC limit 1'); } else { $rows = $rpi->Consulta("select num_processo, classe, especificacao from processos where num_processo > '" . $_GET['num_processo'] . "' order by num_processo ASC limit 1"); } $registros = 0; $arrayInsert = array(); $qtd_caracteres_total = 14; foreach ($rows as $rs) { //$rs['num_processo'] $zeros = ''; $qtd_char_processo = strlen($rs['num_processo']); //Fill zeros for($i=0; $i < ($qtd_caracteres_total - $qtd_char_processo); $i++) { $zeros .= '0'; } echo('BR5' . $zeros . $rs['num_processo'] . '<br>'); $url = 'http://www.tmdn.org/tmview/trademark/image/BR5' . $zeros . $rs['num_processo']; //Aqui tento acessar a imagem e salvar na pasta correspondente save_image($url, __DIR__ .'/logo/' . $rs['num_processo'] . '.jpg'); //copy('https://www.tmdn.org/tmview/trademark/image/BR5' . $zeros . $rs['num_processo'], __DIR__ .'/logo/' . $rs['num_processo'] . '.jpg'); $processo = $rs['num_processo']; $registros++; } $registros = number_format($registros, 0, ',', '.'); // Display Script End time $time_end = microtime(true); //dividing with 60 will give the execution time in minutes other wise seconds $execution_time = ($time_end - $start)/60; //execution time of the script echo '<b>Total Execution Time:</b> '. $execution_time .' Mins <hr><br><br>Registros: ' . $registros . '<br><br>'; echo("<a href='down_logo.php?num_processo=" . $processo ."' target='_self'>Próxima página</a><br><br>"); ?> O erro retornado é o seguinte:
       
      Warning: fopen(): SSL: Connection reset by peer in /home/storage/8/23/2c/euregistrogrpi/public_html/grpiv2/rpi/down_logo.php on line 10

      Warning: fopen(http://www.tmdn.org/tmview/trademark/image/BR500000825642590): failed to open stream: HTTP request failed! in /home/storage/8/23/2c/euregistrogrpi/public_html/grpiv2/rpi/down_logo.php on line 10

      Warning: fread() expects parameter 1 to be resource, boolean given in /home/storage/8/23/2c/euregistrogrpi/public_html/grpiv2/rpi/down_logo.php on line 12

      Warning: fclose() expects parameter 1 to be resource, boolean given in /home/storage/8/23/2c/euregistrogrpi/public_html/grpiv2/rpi/down_logo.php on line 16
       
      Só que se você tentar acessar o endereço no browser, diretamente, a imagem aparece:
       
      https://www.tmdn.org/tmview/trademark/image/BR500000825642590 
       
      Onde posso estar errando? Obrigado pela atenção de todos.
    • By lucasseribeiro
      Bons dias, fórum!
       
      Procurei uma área específica para o JavaFX e não encontrei... Estou aprendendo a usar essa biblioteca, está ficando interessante, se assemelha às tecnologias web com as quais tenho muita familiaridade pois uso há anos. Mas o CSS do JavaFX é diferente daquele do consórcio W3, e não estou encontrando material para entender esse -fx-CSS... A referência CSS da Oracle (https://docs.oracle.com/javase/8/javafx/api/javafx/scene/doc-files/cssref.html) é obscura e não contém as infos que preciso, apesar de esclarecer muitas coisas... Passa uma impressão de que eles não querem que todos saibam!
      Por exemplo: ao estilizar uma menu-bar, mudei seu background, alterei a cor da fonte dos menus, mas eles ficaram colados uns nos outros, e eu não entendi como escolher a propriedade CSS adequada do FX para controlar a distância dos menus. Pude usar um padding, mas ao executar, quando abrimos um menu, os outros ainda são empurrados pois ainda que suas inscrições estejam separadas, os botões do menu ainda estão colados. O tutoriais não abordam o CSS do FX em profundidade, focam-se nos objetivos dos projetos e suas abordagens...
      Rsrs, podia ter no W3Schools... Alguém pode me ajudar com isso???
       
      Grato desde já!
       
      Lucas Ribeiro
    • By quimera
      O problema seria simples se o script da página permitisse o autopreenchimento usando javascript, masssssssssssss...
      O site em questão não permite que o campo seja preenchido dinamicamente ou seja usando script (ele identifica a digitação do teclado para impedir isso)
      Eles devem usar algo como: onkeypress ou onkeyup e acumular os valores digitados numa variável para dispor isso no post/get
      Por que nesse caso, se foi simplesmente colado ou preenchido via script não vai aceitar já que provavelmente é acumulativo e não verificado se o campo foi preenchido.
      Então como preencher dinamicamente o campo usando javascript nesse caso?
    • By Sapinn
      Estou com dificuldade para chamar um arquivo CSS usando a configuração de um arquivo php. O bootstrap também não surte efeito na paginas
       
      Vejam só
      Config.php
       
      <?php define('APP_NOME','Projeto GIBI'); define('URL','http://localhost/bora_php');  
       
      index.php
       
      <?php include './../app/configuracao.php'; include './../app/Libraries/Rota.php'; include './../app/Libraries/Controller.php'; ?> <!DOCTYPE html> <html lang="pt-br"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <link rel="stylesheet" href="<?=URL?>/public/css/estilos.css">     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" >         <title><?= APP_NOME?></title> </head> <body>     <?php         $rotas = new Rota();     ?>     <script src="https://code.jquery.com/jquery-3.5.1.min.js" ></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" ></script> <script src="<?=URL?>/public/css/script.js" ></script> </body> </html> estilo.css
      html{     background-color: red; }  
      Estou tentando seguir a padronização MVC(que por sinal eu tenho certa dificuldade), então não consigo achar onde estou errando
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.