[ Príspevkov: 8 ] 
AutorSpráva
Offline

Užívateľ
Užívateľ
Obrázok užívateľa

Registrovaný: 22.07.08
Prihlásený: 05.01.24
Príspevky: 134
Témy: 49 | 49
Bydlisko: Bratislava

Ahojte,

akým kódom zobraziť obrázok ako pozadie (100% šírka a 100% výška browsera) v celom prehliadači a potom po 5 sekundách načítať web stránku?

Edit: Doplním, že ide to realizovať, že sa na index.html (zmenilo by sa na hostingu index.php len na index.html) vloží len pozadie a potom sa presmeruje na index.php ale toto riešenie Google zamieta pri ich reklamách, Google ads nemá rád presmerovanie.

Cieľ je existujúci index.php upraviť tak aby sa tam vložilo pozadie na 5 sekúnd a potom sa automaticky zobrazil web a pozadie by sa stratilo.

Ďakujem.


Offline

Užívateľ
Užívateľ
Zobrazenie obrázka a potom načítanie webu

Registrovaný: 28.02.11
Prihlásený: 08.05.24
Príspevky: 197
Témy: 6 | 6
Bydlisko: Bratislava

Ak do toho nechceme pchať asynchróne načítavanie obsahu webu pomocou JS, nebolo by to realizovateľné, pomocou high-ordered css? Malinký kus CSS, ktorý umiestnime tak aby vážne neblokoval render ale zároveň aby sa načítal exaktne ako prvý a pomocou neho display:none content webu a nechať iba div s obrázkom a nastaviť transition na 5s, kde sa div s obrázkom schová a zobrazí sa content? display:none sa totiž nedá animovať a tak sa to prepne bez animácie. Google to vezme, pretože to bude považovať za preloader.
Problémom ostáva dĺžka načítania toho obrázku, čiže jeho dátová veľkosť.

Kód:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>pcf</title>
    <style>
        .overlay-image {
            --time: 5s
        }

        .page-content, .overlay-image {
            animation-fill-mode: forwards
        }

        .page-content {
            opacity: 0;
            animation: page-content linear 1s
        }

        .overlay-image {
            top: 0;
            left: 0;
            width: 100dvw;
            height: 100dvh;
            position: fixed;
            animation: overlay-image linear var(--time)
        }

        .overlay-image img {
            min-width: 100%;
            display: block;
            object-fit: cover
        }

        @keyframes page-content {
            100% {
                opacity: 1
            }
        }

        @keyframes overlay-image {
            100% {
                display: none
            }
        }
    </style>
</head>
<body>

<div class="page-content">...</div>

<div class="overlay-image">
    <img loading="lazy" src="https://dummyimage.com/600x400/000/fff" alt="img">
</div>
</body>
</html>


Alebo verzia s trochou Javascriptu

Kód:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>pcf</title>
    <style>
        .page-content {
            display: none
        }

        .overlay-image {
            top: 0;
            left: 0;
            width: 100dvw;
            height: 100dvh;
            position: fixed
        }

        .overlay-image img {
            min-width: 100%;
            display: block;
            object-fit: cover
        }
    </style>
    <script>
        (() => {
            const time = 5;
            setTimeout(() => {
                document.querySelector('.page-content').style.display = 'block';
                document.querySelector('.overlay-image').remove();
            }, time * 1000);
        })();
    </script>

</head>
<body>

<div class="page-content">...</div>

<div class="overlay-image">
    <img loading="lazy" src="https://dummyimage.com/600x400/000/fff" alt="img">
</div>
</body>
</html>


_________________
Neznalosť zložitých operácií necháva myseľ otvorenú pre geniálne riešenia založené na jednoduchosti.
Offline

Užívateľ
Užívateľ
Obrázok užívateľa

Registrovaný: 22.07.08
Prihlásený: 05.01.24
Príspevky: 134
Témy: 49 | 49
Bydlisko: Bratislava
Napísal autor témyOffline : 05.01.2024 7:28 | Zobrazenie obrázka a potom načítanie webu

Super, fičí to, ďakujem.

// Spojený príspevok Pia 05.01.24 8:43

Ešte je mozne helfnut ako presne vlozit vas kod do tohto kodu nizsie?

Kód:
<?php
// Version
define('VERSION', '2.0.3.1');

// Configuration
if (is_file('config.php')) {
   require_once('config.php');
}

// Install
if (!defined('DIR_APPLICATION')) {
   header('Location: install/index.php');
   exit;
}

// VirtualQMOD
require_once('./vqmod/vqmod.php');
VQMod::bootup();

// VQMODDED Startup
require_once(VQMod::modCheck(DIR_SYSTEM . 'startup.php'));

// Registry
$registry = new Registry();

// Loader
$loader = new Loader($registry);
$registry->set('load', $loader);

// Config
$config = new Config();
$registry->set('config', $config);

// Database
$db = new DB(DB_DRIVER, DB_HOSTNAME, DB_USERNAME, DB_PASSWORD, DB_DATABASE);
$registry->set('db', $db);

// Store
if (isset($_SERVER['HTTPS']) && (($_SERVER['HTTPS'] == 'on') || ($_SERVER['HTTPS'] == '1'))) {
   $store_query = $db->query("SELECT * FROM " . DB_PREFIX . "store WHERE REPLACE(`ssl`, 'www.', '') = '" . $db->escape('https://' . str_replace('www.', '', $_SERVER['HTTP_HOST']) . rtrim(dirname($_SERVER['PHP_SELF']), '/.\\') . '/') . "'");
} else {
   $store_query = $db->query("SELECT * FROM " . DB_PREFIX . "store WHERE REPLACE(`url`, 'www.', '') = '" . $db->escape('http://' . str_replace('www.', '', $_SERVER['HTTP_HOST']) . rtrim(dirname($_SERVER['PHP_SELF']), '/.\\') . '/') . "'");
}

if ($store_query->num_rows) {
   $config->set('config_store_id', $store_query->row['store_id']);
} else {
   $config->set('config_store_id', 0);
}

// Settings
$query = $db->query("SELECT * FROM `" . DB_PREFIX . "setting` WHERE store_id = '0' OR store_id = '" . (int)$config->get('config_store_id') . "' ORDER BY store_id ASC");

foreach ($query->rows as $result) {
   if (!$result['serialized']) {
      $config->set($result['key'], $result['value']);
   } else {
      $config->set($result['key'], unserialize($result['value']));
   }
}

if (!$store_query->num_rows) {
   $config->set('config_url', HTTP_SERVER);
   $config->set('config_ssl', HTTPS_SERVER);
}

// Url
$url = new Url($config->get('config_url'), $config->get('config_secure') ? $config->get('config_ssl') : $config->get('config_url'));
$registry->set('url', $url);

// Log
$log = new Log($config->get('config_error_filename'));
$registry->set('log', $log);

function error_handler($errno, $errstr, $errfile, $errline) {
   global $log, $config;

   // error suppressed with @
   if (error_reporting() === 0) {
      return false;
   }

   switch ($errno) {
      case E_NOTICE:
      case E_USER_NOTICE:
         $error = 'Notice';
         break;
      case E_WARNING:
      case E_USER_WARNING:
         $error = 'Warning';
         break;
      case E_ERROR:
      case E_USER_ERROR:
         $error = 'Fatal Error';
         break;
      default:
         $error = 'Unknown';
         break;
   }

   if ($config->get('config_error_display')) {
      echo '<b>' . $error . '</b>: ' . $errstr . ' in <b>' . $errfile . '</b> on line <b>' . $errline . '</b>';
   }

   if ($config->get('config_error_log')) {
      $log->write('PHP ' . $error . ':  ' . $errstr . ' in ' . $errfile . ' on line ' . $errline);
   }

   return true;
}

// Error Handler
set_error_handler('error_handler');

// Request
$request = new Request();
$registry->set('request', $request);

// Response
$response = new Response();
$response->addHeader('Content-Type: text/html; charset=utf-8');
$response->setCompression($config->get('config_compression'));
$registry->set('response', $response);

// Cache
$cache = new Cache('file');
$registry->set('cache', $cache);

// Session
$session = new Session();
$registry->set('session', $session);

// Language Detection
$languages = array();

$query = $db->query("SELECT * FROM `" . DB_PREFIX . "language` WHERE status = '1'");

foreach ($query->rows as $result) {
   $languages[$result['code']] = $result;
}

if (isset($session->data['language']) && array_key_exists($session->data['language'], $languages)) {
   $code = $session->data['language'];
} elseif (isset($request->cookie['language']) && array_key_exists($request->cookie['language'], $languages)) {
   $code = $request->cookie['language'];
} else {
   $detect = '';

   if (isset($request->server['HTTP_ACCEPT_LANGUAGE']) && $request->server['HTTP_ACCEPT_LANGUAGE']) {
      $browser_languages = explode(',', $request->server['HTTP_ACCEPT_LANGUAGE']);

      foreach ($browser_languages as $browser_language) {
         foreach ($languages as $key => $value) {
            if ($value['status']) {
               $locale = explode(',', $value['locale']);

               if (in_array($browser_language, $locale)) {
                  $detect = $key;
                  break 2;
               }
            }
         }
      }
   }

   $code = $detect ? $detect : $config->get('config_language');
}

if (!isset($session->data['language']) || $session->data['language'] != $code) {
   $session->data['language'] = $code;
}

if (!isset($request->cookie['language']) || $request->cookie['language'] != $code) {
   setcookie('language', $code, time() + 60 * 60 * 24 * 30, '/', $request->server['HTTP_HOST']);
}

$config->set('config_language_id', $languages[$code]['language_id']);
$config->set('config_language', $languages[$code]['code']);

// Language
$language = new Language($languages[$code]['directory']);
$language->load($languages[$code]['directory']);
$registry->set('language', $language);

// Document
$registry->set('document', new Document());

// Customer
$customer = new Customer($registry);
$registry->set('customer', $customer);

// Customer Group
if ($customer->isLogged()) {
   $config->set('config_customer_group_id', $customer->getGroupId());
} elseif (isset($session->data['customer']) && isset($session->data['customer']['customer_group_id'])) {
   // For API calls
   $config->set('config_customer_group_id', $session->data['customer']['customer_group_id']);
} elseif (isset($session->data['guest']) && isset($session->data['guest']['customer_group_id'])) {
   $config->set('config_customer_group_id', $session->data['guest']['customer_group_id']);
}

// Tracking Code
if (isset($request->get['tracking'])) {
   setcookie('tracking', $request->get['tracking'], time() + 3600 * 24 * 1000, '/');

   $db->query("UPDATE `" . DB_PREFIX . "marketing` SET clicks = (clicks + 1) WHERE code = '" . $db->escape($request->get['tracking']) . "'");
}

// Affiliate
$registry->set('affiliate', new Affiliate($registry));

// Currency
$registry->set('currency', new Currency($registry));

// Tax
$registry->set('tax', new Tax($registry));

// Weight
$registry->set('weight', new Weight($registry));

// Length
$registry->set('length', new Length($registry));

// Cart
$registry->set('cart', new Cart($registry));

// Encryption
$registry->set('encryption', new Encryption($config->get('config_encryption')));

//OpenBay Pro
$registry->set('openbay', new Openbay($registry));

// Event
$event = new Event($registry);
$registry->set('event', $event);

$query = $db->query("SELECT * FROM " . DB_PREFIX . "event");

foreach ($query->rows as $result) {
   $event->register($result['trigger'], $result['action']);
}

// Front Controller
$controller = new Front($registry);

// Maintenance Mode
$controller->addPreAction(new Action('common/maintenance'));

// SEO URL's
$controller->addPreAction(new Action('common/seo_url'));

// Router
if (isset($request->get['route'])) {
   $action = new Action($request->get['route']);
} else {
   $action = new Action('common/home');
}

// Dispatch
$controller->dispatch($action, new Action('error/not_found'));

// Output
$response->output();


Offline

Užívateľ
Užívateľ
Zobrazenie obrázka a potom načítanie webu

Registrovaný: 28.02.11
Prihlásený: 08.05.24
Príspevky: 197
Témy: 6 | 6
Bydlisko: Bratislava

Nikde sa nevypisuje žiadne HTML. Čo vypľuje $response->output(); ?


_________________
Neznalosť zložitých operácií necháva myseľ otvorenú pre geniálne riešenia založené na jednoduchosti.
Offline

Užívateľ
Užívateľ
Obrázok užívateľa

Registrovaný: 22.07.08
Prihlásený: 05.01.24
Príspevky: 134
Témy: 49 | 49
Bydlisko: Bratislava
Napísal autor témyOffline : 05.01.2024 12:51 | Zobrazenie obrázka a potom načítanie webu

V poslednom riadku to je ale ako tam vlozit pozadovany kod?


Offline

Užívateľ
Užívateľ
Zobrazenie obrázka a potom načítanie webu

Registrovaný: 28.02.11
Prihlásený: 08.05.24
Príspevky: 197
Témy: 6 | 6
Bydlisko: Bratislava

Práve preto sa pýtam, čo je obsahom výstupu $response->output();? Je to kompletné HTML, alebo iba časť HTML, je to iba nejaký reťazec, je to nejaká binárka?

Na to aby sme to vedeli korektne owrapovať, musíme vedieť, čo budeme wrapovať. Nemôžeš dať do DIV celý HTML dokument alebo PDF binárku. Treba to odoslať aj so správnymi hlavičkami.


_________________
Neznalosť zložitých operácií necháva myseľ otvorenú pre geniálne riešenia založené na jednoduchosti.
Offline

Užívateľ
Užívateľ
Obrázok užívateľa

Registrovaný: 22.07.08
Prihlásený: 05.01.24
Príspevky: 134
Témy: 49 | 49
Bydlisko: Bratislava
Napísal autor témyOffline : 05.01.2024 13:19 | Zobrazenie obrázka a potom načítanie webu

Predpokladám, že celé HTML.
Je to custom cms, robil to niekto iný.


Offline

Užívateľ
Užívateľ
Zobrazenie obrázka a potom načítanie webu

Registrovaný: 28.02.11
Prihlásený: 08.05.24
Príspevky: 197
Témy: 6 | 6
Bydlisko: Bratislava

Predpokladáš? Takže si ten výstup ešte nevidel? Celé HTML pre mňa znamená
Kód:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>pcf</title>
</head>
<body>
</body>
</html>


A toto nemôžeš owrapovať.
Budeš musieť upraviť triedu, ktorá generuje ten výstup a tam pridáš požadované kusy HTML a CSS, ktoré sa vyrenderujú pomocou output ako celok.


_________________
Neznalosť zložitých operácií necháva myseľ otvorenú pre geniálne riešenia založené na jednoduchosti.
 [ Príspevkov: 8 ] 


Zobrazenie obrázka a potom načítanie webu



Podobné témy

 Témy  Odpovede  Zobrazenia  Posledný príspevok 
V tomto fóre nie sú ďalšie neprečítané témy.

Nacitanie dynamicky generovaneho obrazka do binarneho stylu

v PHP, ASP

8

553

02.06.2007 12:34

imcold

V tomto fóre nie sú ďalšie neprečítané témy.

Načítanie webu

v Ostatné

6

469

21.06.2013 14:35

ofun

V tomto fóre nie sú ďalšie neprečítané témy.

Problem s IP nacitanie do webu?

v PHP, ASP

2

434

05.05.2008 16:13

bruno.b

V tomto fóre nie sú ďalšie neprečítané témy.

zobrazenie velkosti webu a subdomen

v PHP, ASP

8

566

13.07.2008 20:42

koudy

V tomto fóre nie sú ďalšie neprečítané témy.

Zobrazenie webu v IE - problem v CSS kode?

v HTML, XHTML, XML, CSS

3

477

18.10.2013 8:42

Ďuri

V tomto fóre nie sú ďalšie neprečítané témy.

winXP potom win98

v Operačné systémy Microsoft

11

704

27.11.2006 10:20

sivko

V tomto fóre nie sú ďalšie neprečítané témy.

Teraz alebo Potom

v PC zostavy

10

685

10.07.2008 9:18

XxRENDYxX

V tomto fóre nie sú ďalšie neprečítané témy.

:visible potom animacia

v JavaScript, VBScript, Ajax

10

382

20.02.2014 15:45

hatto13

V tomto fóre nie sú ďalšie neprečítané témy.

XP a potom UBUNTU

v Operačné systémy Microsoft

5

480

14.01.2007 18:03

POM4R4NC

V tomto fóre nie sú ďalšie neprečítané témy.

inštalacia ovladačov ..ako potom

v Operačné systémy Microsoft

10

492

12.08.2008 13:33

majky358

V tomto fóre nie sú ďalšie neprečítané témy.

Zmluva az potom pohovor ?

v Ostatné

4

442

09.03.2020 14:46

Miso122

V tomto fóre nie sú ďalšie neprečítané témy.

Avira a čo potom

v Antivíry a antispywary

8

841

14.09.2010 14:39

KingTommy

V tomto fóre nie sú ďalšie neprečítané témy.

DVD napali ale potom neprecita

v Optické zariadenia

0

783

21.12.2007 17:03

zuzuli

V tomto fóre nie sú ďalšie neprečítané témy.

PC nabehbne a potom zhasne

v PC skrinky a zdroje

16

535

25.08.2014 17:14

Trty

V tomto fóre nie sú ďalšie neprečítané témy.

Zvuk raz ide, potom nie

v Zvuk

0

392

10.08.2014 11:15

mayo505

V tomto fóre nie sú ďalšie neprečítané témy.

Pocitac startuje-potom black screen

v AMD čipové sady

8

718

13.07.2015 9:46

nagasaki.



© 2005 - 2024 PCforum, edited by JanoF