Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Getting this plugin working again #7

Open
wants to merge 11 commits into from

2 participants

Jeffery To Andrée Hansson
Jeffery To

Initially I wanted to reuse the approach from Paul Irish's gist (setting the image src to a data uri, then back again), but this was causing more side effects than I anticipated so I switched to a simpler .trigger('load'). If you'd rather have a cleaner list of commits to merge, I can redo the changes in another branch.

The biggest change to users of this plugin is that the event handler is called outside the bind call stack (using setTimeout). I've updated the test suite to reflect this.

Andrée Hansson
Owner

I will look this over this week, it would be awesome if we could make it work again.

Jeffery To

Any thoughts or comments?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
This page is out of date. Refresh to see the latest.
Showing with 96 additions and 48 deletions.
  1. +31 −19 ahpi.imgload.js
  2. +65 −29 qunit/index.html
50 ahpi.imgload.js
View
@@ -1,6 +1,6 @@
/*
* Special event for image load events
- * Needed because some browsers does not trigger the event on cached images.
+ * Needed because some browsers does not trigger the event on already-loaded images.
* MIT License
* Paul Irish | @paul_irish | www.paulirish.com
@@ -21,25 +21,37 @@
* Chromium 5-6
* Opera 9-10
*/
-(function ($) {
- $.event.special.load = {
- add: function (hollaback) {
- if ( this.nodeType === 1 && this.tagName.toLowerCase() === 'img' && this.src !== '' ) {
- // Image is already complete, fire the hollaback (fixes browser issues were cached
- // images isn't triggering the load event)
- if ( this.complete || this.readyState === 4 ) {
- hollaback.handler.apply(this);
- }
+(function ($, undefined) {
+ $.each({
+ load: function (el) { return el.complete || el.complete === undefined; },
+ error: function (el) { return el.readyState === 'uninitialized' && el.src.indexOf('data:') === 0; }
+ }, function (eventName, isReady) {
+ $.event.special[eventName] = {
+ add: function (handleObj) {
+ var el = this, flag = eventName + '-guid', old_handler = handleObj.handler;
- // Check if data URI images is supported, fire 'error' event if not
- else if ( this.readyState === 'uninitialized' && this.src.indexOf('data:') === 0 ) {
- $(this).trigger('error');
- }
-
- else {
- $(this).bind('load', hollaback.handler);
+ if ( el.nodeType === 1 && el.nodeName.toUpperCase() === 'IMG' && el.src !== '' ) {
+ // Check if the image is already loaded or if data URI images are supported
+ // Trigger the event handler if necessary
+ if ( isReady(el) ) {
+ handleObj.handler = function () {
+ var guid = $.data(el, flag), ret;
+ if ( guid === old_handler.guid || guid === undefined ) {
+ ret = old_handler.apply(el, arguments);
+ }
+ return ret;
+ };
+
+ // Let jQuery finish binding the event handler
+ setTimeout(function () {
+ $(el)
+ .data(flag, old_handler.guid)
+ .trigger(eventName)
+ .removeData(flag);
+ }, 0);
+ }
}
}
- }
- };
+ };
+ });
}(jQuery));
94 qunit/index.html
View
@@ -10,47 +10,82 @@
<script src="../ahpi.imgload.js"></script>
<script src="qunit/qunit.js"></script>
<script>
-(function () {
-
-var img = new Image();
-img.onerror = img.onload = function () { runTests(); };
-img.src = 'cached.gif';
-
-function runTests() {
+function log(msg) {
+ if (window.console && console.log) {
+ console.log(msg);
+ }
+}
+$(window).load(function () {
test("Image load event (Normal)", function () {
- expect(2);
-
- var $normal = $('#normal');
- $normal.bind('load', function () { ok(true, "Load event fired"); });
- $normal.unbind('load');
- ok(true, "Load event unbound");
+ expect(1);
+
+ $('#normal')
+ // NASA image URL from Dean Edwards (http://dean.edwards.name/my/busted.html)
+ .attr('src', 'http://www.nasa.gov/images/content/84857main_EC04-0325-23_lg.jpg?' + Math.random())
+ .bind('load', function () {
+ log('normal ' + this.src);
+ ok(true, "Load event fired");
+ start();
+ });
+ stop();
});
test("Image load event (Cached)", function () {
- expect(2);
+ expect(1);
- var $cached = $('#cached').attr('src', 'cached.gif');
- $cached.bind('load', function () { ok(true, "Load event fired"); });
- $cached.unbind('load');
- ok(true, 'Load event unbound');
+ $('#cached')
+ .bind('load', function () {
+ log('cached ' + this.src);
+ ok(true, "Load event fired");
+ start();
+ });
+ stop();
});
test("Image load event (Data URI)", function () {
- expect(2);
-
- var $datauri = $('#datauri');
- $datauri.bind('error', function () { ok(true, "Data URI not supported"); });
- $datauri.bind('load', function () { ok(true, "Load event fired"); });
- $datauri.unbind('load');
- ok(true, 'Load event unbound');
+ expect(1);
+
+ $('#datauri')
+ .bind('error', function () {
+ log('data uri error ' + this.src);
+ ok(true, "Data URI not supported");
+ start();
+ })
+ .bind('load', function () {
+ log('data uri load ' + this.src);
+ ok(true, "Load event fired");
+ start();
+ });
+ stop();
});
-}
-}());
+ test("Multiple load event handlers", function () {
+ var count = 0;
+
+ expect(1);
+
+ $('#multiple').bind('load', function () {
+ count++;
+ log('first handler ' + this.src);
+ });
+ setTimeout(function () {
+ $('#multiple').bind('load', function () {
+ count++;
+ log('second handler ' + this.src);
+ });
+ }, 1000);
+ setTimeout(function () {
+ equal(count, 2, "Previous load event handler not called when new handler is bound");
+ start();
+ }, 2000);
+
+ stop();
+ });
+});
</script>
</head>
@@ -58,9 +93,10 @@
<body>
<p>
- <img id="normal" src="normal.gif" />
- <img id="cached" src="" />
+ <img id="normal" src="" height="240" width="300" />
+ <img id="cached" src="cached.gif" />
<img id="datauri" src="data:image/gif;base64,R0lGODdhGwAPAIAAAP///wAAACwAAAAAGwAPAAACN4SPqcvtD08IaIKJrclab+pdlDR+FViK50qq7Wu2XOjGJreEOmrDteqhCUed1E6R8RWTkaYzUgAAOw==" />
+ <img id="multiple" src="cached.gif" width="1" height="1" />
<a href="../ahpi.imgload.js">ahpi.imgload.js Source</a>
</p>
Something went wrong with that request. Please try again.