有冇故意serve得慢的online dummy image generator

Online dummy image generator如
http://lorempixel.com/
http://loremflickr.com/

有冇故意serve得好慢的?要求三幾秒先完成。

因為要等image load晒先量度頁面高度。我話咗唔可以on page load做,啲人繼續onload。

想放張慢圖等人知道問題。

img onload="xxxx"
應該冇問題?
window.onload先易出事

想專登整個慢既, 是但搵個php sleep幾秒先再stream張image就得啦

TOP

img onload="xxxx"
應該冇問題?
window.onload先易出事

想專登整個慢既, 是但搵個php sleep幾秒先再str ...
KinChungE 發表於 2017-7-22 01:27 AM


就係用咗window.onload囉

如果有現成慢server就唔使寫啦

TOP

Online dummy image generator如



有冇故意serve得好慢的?要求三幾秒先完成。

因為要等image load晒先 ...
chimp 發表於 2017-7-22 01:23


用animation 拖延display時間
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         .element-animation {
  8.             opacity: 0;
  9.             animation: animationFrames  ease-out  4s forwards;
  10.             animation-iteration-count: 1;
  11.             transform-origin: 50% 50%;
  12.             -webkit-animation: animationFrames  ease-out  4s forwards;
  13.             -webkit-animation-iteration-count: 1;
  14.             -webkit-transform-origin: 50% 50%;
  15.             -moz-animation: animationFrames  ease-out  4s forwards;
  16.             -moz-animation-iteration-count: 1;
  17.             -moz-transform-origin: 50% 50%;
  18.             -o-animation: animationFrames  ease-out  4s forwards;
  19.             -o-animation-iteration-count: 1;
  20.             -o-transform-origin: 50% 50%;
  21.             -ms-animation: animationFrames  ease-out  4s forwards;
  22.             -ms-animation-iteration-count: 1;
  23.             -ms-transform-origin: 50% 50%;
  24.         }

  25.         @keyframes animationFrames {
  26.             99%{
  27.                 opacity: 0;
  28.             }
  29.             100% {
  30.                 opacity: 1;
  31.             }
  32.         }

  33.         @-moz-keyframes animationFrames {
  34.             99%{
  35.                 opacity: 0;
  36.             }
  37.             100% {
  38.                 opacity: 1;
  39.             }
  40.         }

  41.         @-webkit-keyframes animationFrames {
  42.             99%{
  43.                 opacity: 0;
  44.             }
  45.             100% {
  46.                 opacity: 1;
  47.             }
  48.         }

  49.         @-o-keyframes animationFrames {
  50.             99%{
  51.                 opacity: 0;
  52.             }
  53.             100% {
  54.                 opacity: 1;
  55.             }
  56.         }

  57.         @-ms-keyframes animationFrames {
  58.             99%{
  59.                 opacity: 0;
  60.             }
  61.             100% {
  62.                 opacity: 1;
  63.             }
  64.         }
  65.     </style>
  66. </head>
  67. <body>
  68. <img class="element-animation" src="http://lorempixel.com/400/200/"/>
  69. </body>
  70. </html>
複製代碼

TOP

回覆 1# chimp


    chrome set network throttle 己經得...

TOP

回覆  chimp


    chrome set network throttle 己經得...
hihihi123hk 發表於 2017-7-22 09:42 PM



    唔得吧,我要張圖load得慢過其他嘢(譬如 load script)。set network throttle容乜易所有嘢都按比例地慢,結果試唔到「script run before image load」呢件事

TOP

本帖最後由 hihihi123hk 於 2017-7-23 05:13 編輯

回覆 6# chimp


都幾肯定用 Network throttle 其實一定試到,不過你咁堅持「覺得」唔得並且要淨係試 Image Delay,咁不如自己寫 local 起個 express ,  兩行 setTimout + res.sendFile 就做完, 有經驗的話 5分鐘內起好又唔洗搞 Nginx

5分鐘唔爭在幫你寫埋

1.
  1. npm init
  2. npm install express --save
複製代碼
2.Create app.js & copy & paste the following code
  1. const express = require('express')
  2. const app = express()

  3. app.get('/', function (req, res) {
  4.     res.send('hello world')
  5. })

  6. app.get('/:timeInMs', function (req, res) {
  7.    
  8.    
  9.     const delay = parseInt(req.params.timeInMs)
  10.    
  11.     if(isNaN(delay)){
  12.        res.status(500).send('you need to input a milliseconds')  
  13.     }
  14.     else {
  15.         setTimeout(() => {
  16.             res.sendFile(__dirname + '/noavatar_middle_v2.png')      
  17.         }, delay)  
  18.     }


  19. })

  20. app.listen(3000, function () {
  21.   console.log('Example app listening!')
  22. })
複製代碼
3. Download https://avatar.hkepc.net/images/noavatar_middle_v2.png and put next to app.js

4. Run the server
  1. node app.js
複製代碼

TOP

本帖最後由 hihihi123hk 於 2017-7-23 05:06 編輯

或者用 Google cloud function , 1分鐘做好玩 Redirection

換 url param (delay, imageUrl)

Delay 1 秒
https://us-central1-tiny-projectsss.cloudfunctions.net/function-1?delay=1000&imageUrl=https://avatar.hkepc.net/data/avatar/000/14/36/76_avatar_middle.jpg

Delay 3 秒
https://us-central1-tiny-projectsss.cloudfunctions.net/function-1?delay=3000&imageUrl=https://avatar.hkepc.net/data/avatar/000/14/36/76_avatar_middle.jpg



https://cloud.google.com/functions/pricing

free tier provides 400,000 GB-seconds, 200,000 GHz-seconds, 2,000,000 Invocations
以 5秒一個 Call 為例

(128/1024) x 5s = 0.625 GB-seconds per invocation

(200/1000) x 5s = 1 GHz-seconds per invocation

400,000 / 0.625 = 64000 次

大約要每個月 Call 640,000次先要收錢,自己用基本上係免費
附件: 您需要登錄才可以下載或查看附件。沒有帳號?註冊

TOP

就係用咗window.onload囉

如果有現成慢server就唔使寫啦
chimp 發表於 2017-7-22 02:09


自己裝個xampp/wamp有幾難?
PHP寫幾句搞掂

TOP

本帖最後由 forte 於 2017-7-23 14:10 編輯

可以用 Service Worker 純 client side 咁做 (Chrome/Firefox only)
PS: 要 localhost 行以下 code (eg: python3 -m http.server), 或用https serve

index.html
  1. <script>
  2. if (navigator.serviceWorker) {
  3.   navigator.serviceWorker.register('/serviceworker.js', {
  4.     scope: '/'
  5.   });
  6. }
  7. // window.onload = function() {
  8.         // alert('onload')
  9. // }
  10. </script>

  11. <h1>Testing for Service Worker</h1>
  12. <img src='http://loremflickr.com/320/240' />
  13. <img src='http://loremflickr.com/100/100' />
複製代碼
serviceworker.js
  1. self.addEventListener('install', function(event) {
  2.         console.log('installed', event)
  3. })

  4. function delayRequest(duration, request) {
  5.     return new Promise(function(resolve, reject){
  6.       setTimeout(function(){
  7.                 //console.log('delay', duration, request)
  8.         fetch(request).then(resolve)
  9.       }, duration)
  10.     });
  11. }


  12. self.addEventListener('fetch', event => {
  13.     let request = event.request;
  14.     let url = new URL(request.url);
  15.         console.log(request.url)
  16.        
  17.     // Ignore non-GET requests
  18.     if (request.method !== 'GET') {
  19.         return;
  20.     }
  21.        
  22.     if (request.headers.get('Accept').includes('image') && !request.headers.get('Accept').includes('html')) {
  23.             var fetchRequest = event.request.clone();
  24.                 event.respondWith(
  25.                         delayRequest(4000, fetchRequest)
  26.                 );
  27.         }
  28. });
複製代碼

TOP