12
返回列表 發帖
chimp

1# 跳轉到 » 倒序看帖
打印
tT
發表於 2017-7-22 01:23 | 只看該作者

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

提示: 作者被禁止或刪除 內容自動屏蔽
收藏 分享

0

KinChungE

Rank: 5Rank: 5Rank: 5Rank: 5Rank: 5
2#
發表於 2017-7-22 01:27 | 只看該作者
img onload="xxxx"
應該冇問題?
window.onload先易出事

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

TOP

chimp

3#
發表於 2017-7-22 02:09 | 只看該作者
提示: 作者被禁止或刪除 內容自動屏蔽

TOP

Ferrari2010

Rank: 2Rank: 2
4#
發表於 2017-7-22 14:36 | 只看該作者
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.         }

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

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

  44.         @-webkit-keyframes animationFrames {
  45.             99%{
  46.                 opacity: 0;
  47.             }
  48.             100% {
  49.                 opacity: 1;
  50.             }
  51.         }

  53.         @-o-keyframes animationFrames {
  54.             99%{
  55.                 opacity: 0;
  56.             }
  57.             100% {
  58.                 opacity: 1;
  59.             }
  60.         }

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

TOP

hihihi123hk

Rank: 3Rank: 3Rank: 3
5#
發表於 2017-7-22 21:42 | 只看該作者
回覆 1# chimp


    chrome set network throttle 己經得...

TOP

chimp

6#
發表於 2017-7-23 03:15 | 只看該作者
提示: 作者被禁止或刪除 內容自動屏蔽

TOP

hihihi123hk

Rank: 3Rank: 3Rank: 3
7#
發表於 2017-7-23 04:14 | 只看該作者
本帖最後由 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()

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

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


  23. })

  25. app.listen(3000, function () {
  26.   console.log('Example app listening!')
  27. })
複製代碼
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

Rank: 3Rank: 3Rank: 3
8#
發表於 2017-7-23 04:43 | 只看該作者
本帖最後由 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

KinChungE

Rank: 5Rank: 5Rank: 5Rank: 5Rank: 5
9#
發表於 2017-7-23 12:17 | 只看該作者
就係用咗window.onload囉

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


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

TOP

forte

Rank: 1
10#
發表於 2017-7-23 14:09 | 只看該作者
本帖最後由 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>

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

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


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

TOP

12
返回列表