image.js 3.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394
  1. // Copyright 2012 The Closure Library Authors. All Rights Reserved.
  2. //
  3. // Licensed under the Apache License, Version 2.0 (the "License");
  4. // you may not use this file except in compliance with the License.
  5. // You may obtain a copy of the License at
  6. //
  7. // http://www.apache.org/licenses/LICENSE-2.0
  8. //
  9. // Unless required by applicable law or agreed to in writing, software
  10. // distributed under the License is distributed on an "AS-IS" BASIS,
  11. // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  12. // See the License for the specific language governing permissions and
  13. // limitations under the License.
  14. /**
  15. * @fileoverview Simple image loader, used for preloading.
  16. * @author nnaze@google.com (Nathan Naze)
  17. */
  18. goog.provide('goog.labs.net.image');
  19. goog.require('goog.Promise');
  20. goog.require('goog.events.EventHandler');
  21. goog.require('goog.events.EventType');
  22. goog.require('goog.net.EventType');
  23. goog.require('goog.userAgent');
  24. /**
  25. * Loads a single image. Useful for preloading images.
  26. *
  27. * @param {string} uri URI of the image.
  28. * @param {(!Image|function(): !Image)=} opt_image If present, instead of
  29. * creating a new Image instance the function will use the passed Image
  30. * instance or the result of calling the Image factory respectively. This
  31. * can be used to control exactly how Image instances are created, for
  32. * example if they should be created in a particular document element, or
  33. * have fields that will trigger CORS image fetches.
  34. * @return {!goog.Promise<!Image>} A Promise that will be resolved with the
  35. * given image if the image successfully loads.
  36. */
  37. goog.labs.net.image.load = function(uri, opt_image) {
  38. return new goog.Promise(function(resolve, reject) {
  39. var image;
  40. if (!goog.isDef(opt_image)) {
  41. image = new Image();
  42. } else if (goog.isFunction(opt_image)) {
  43. image = opt_image();
  44. } else {
  45. image = opt_image;
  46. }
  47. // IE's load event on images can be buggy. For older browsers, wait for
  48. // readystatechange events and check if readyState is 'complete'.
  49. // See:
  50. // http://msdn.microsoft.com/en-us/library/ie/ms536957(v=vs.85).aspx
  51. // http://msdn.microsoft.com/en-us/library/ie/ms534359(v=vs.85).aspx
  52. //
  53. // Starting with IE11, start using standard 'load' events.
  54. // See:
  55. // http://msdn.microsoft.com/en-us/library/ie/dn467845(v=vs.85).aspx
  56. var loadEvent = (goog.userAgent.IE && goog.userAgent.VERSION < 11) ?
  57. goog.net.EventType.READY_STATE_CHANGE :
  58. goog.events.EventType.LOAD;
  59. var handler = new goog.events.EventHandler();
  60. handler.listen(
  61. image, [loadEvent, goog.net.EventType.ABORT, goog.net.EventType.ERROR],
  62. function(e) {
  63. // We only registered listeners for READY_STATE_CHANGE for IE.
  64. // If readyState is now COMPLETE, the image has loaded.
  65. // See related comment above.
  66. if (e.type == goog.net.EventType.READY_STATE_CHANGE &&
  67. image.readyState != goog.net.EventType.COMPLETE) {
  68. return;
  69. }
  70. // At this point, we know whether the image load was successful
  71. // and no longer care about image events.
  72. goog.dispose(handler);
  73. // Whether the image successfully loaded.
  74. if (e.type == loadEvent) {
  75. resolve(image);
  76. } else {
  77. reject(null);
  78. }
  79. });
  80. // Initiate the image request.
  81. image.src = uri;
  82. });
  83. };