assets.html 1.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Zepto assets functional test</title>
  6. <link rel="stylesheet" href="../test.css">
  7. <meta name="viewport" content="maximum-scale=1,initial-scale=1,user-scalable=0">
  8. <script src="../../src/zepto.js"></script>
  9. <script src="../../src/ie.js"></script>
  10. <style>
  11. #container div {
  12. margin: 2px;
  13. padding: 2px;
  14. display: block;
  15. background-color: #ccc;
  16. }
  17. img {
  18. margin: 0;
  19. height: 100px;
  20. vertical-align: middle;
  21. }
  22. </style>
  23. </head>
  24. <body>
  25. <h1>Zepto assets functional test</h1>
  26. <div id="browser"></div>
  27. <ul>
  28. <li><a href="?without">Run without the assets plugin</a></li>
  29. <li><a href="?with">Run with the assets plugin</a></li>
  30. <li><a href="?">Stop</a></li>
  31. </ul>
  32. <p>When you run this test without the assets plugin, Mobile Safari will stop loading after on average 8 images (that's on the iPad with 1 MB images). It might also crash.</p>
  33. <p><strong>PLEASE NOTE:</strong> You <strong>must restart Safari</strong> between runs (click the home button to return to the home screen, double-click the home button, tap-and-hold the Safari icon, then tap the minus badge).</p>
  34. <div id="container"></div>
  35. <script>
  36. var prefix = 'http://stuff.vandervossen.net/temporary/zepto_assets_test/sintel-',
  37. mode = window.location.search.slice(1),
  38. timeout,
  39. i
  40. if (mode === 'with') {
  41. document.write('<script src="../src/assets.js"></s'+'cript>')
  42. document.write('RUNNING WITH ASSETS PLUGIN')
  43. }
  44. if (mode !== '') {
  45. i = 1
  46. ;(function frame() {
  47. $('#image' + (i - 4)).remove()
  48. $('#container').prepend('<div>' + i + ': <img id="image' + i + '" src="' + prefix + i + '.jpg"></div>')
  49. if (i++ < 51) timeout = setTimeout(frame, 6000)
  50. })()
  51. }
  52. $('#browser').text(navigator.userAgent)
  53. </script>
  54. </body>
  55. </html>