Permalink
Browse files

Integrated Craig's preload image plugin

  • Loading branch information...
1 parent 4c284a6 commit f640fc1e5380c9e2fea9ea3a98f0c540fe5d02b7 Dustin Moore committed Dec 7, 2009
Showing with 86 additions and 11 deletions.
  1. +7 −1 README.md
  2. +17 −10 jquery.qtip-1.0.0-rc3-dm.js
  3. +62 −0 jquery.qtip.preload.js
View
@@ -7,7 +7,13 @@ original qtip 1.0.0-rc3
Here are the changes I have made:
-* Added Craigs opacity fix for to the afterShow function to prevent the tip opacity being set wrong when tip drawing is interrupted.
+12-7-2009
+
+* Integrated Craig's image preload function into this version of the script. Note: Script now requires the jquery.preload.js plugin.
+
+12-4-2009
+
+* Added Craig's opacity fix for to the afterShow function to prevent the tip opacity being set wrong when tip drawing is interrupted.
* Raised the base z-index to a higher number to prevent z-index conflicts.
* Added functionality so that unfocus can be used with other hide actions, i.e.
@@ -797,16 +797,23 @@
else self.elements.content.html(content);
// Check if images need to be loaded before position is updated to prevent mis-positioning
- images = self.elements.content.find('img[complete=false]');
- if(images.length > 0)
- {
- loadedImages = 0;
- images.each(function(i)
- {
- $('<img src="'+ $(this).attr('src') +'" />')
- .load(function(){ if(++loadedImages == images.length) afterLoad(); });
- });
- }
+ loadedImages = 0; images = self.elements.content.find('img');
+ if(images.length)
+ {
+ if($.fn.qtip.preload)
+ {
+ images.each(function()
+ {
+ // Use preloaded image dimensions to prevent incorrect positioning
+ preloaded = $('body > img[src="'+$(this).attr('src')+'"]:first');
+ if(preloaded.length > 0) $(this).attr('width', preloaded.innerWidth()).attr('height', preloaded.innerHeight());
+ });
+ afterLoad();
+ }
+
+ // Make sure all iamges are loaded before proceeding with position update
+ else images.bind('load error', function() { if(++loadedImages === images.length) afterLoad(); });
+ }
else afterLoad();
function afterLoad()
@@ -0,0 +1,62 @@
+/*!
+ * jquery.qtip.imageload. The jQuery tooltip plugin - Image preloader plugin
+ *
+ * This plugin fixes positioning issues caused by using images in your content
+ * by preloading them and attaching them the DOM in advance. It's primarily useful
+ * for people who use qTip for things like lightbox functionality.
+ *
+ * Based on an article by matt: http://www.mattfarina.com/2007/02/01/preloading_images_with_jquery
+ *
+ * Copyright (c) 2009 Craig Thompson
+ * http://craigsworks.com
+ *
+ * Licensed under MIT
+ * http://www.opensource.org/licenses/mit-license.php
+ *
+ * Launch : August 2009
+ * Version : TRUNK - NOT FOR USE IN PRODUCTION ENVIRONMENTS!!!!
+ *
+ * FOR STABLE VERSIONS VISIT: http://craigsworks.com/projects/qtip/download/
+ */
+
+/*jslint onevar: true, browser: true, forin: true, undef: true, nomen: true, eqeqeq: true, bitwise: true, regexp: true, newcap: true, maxerr: 100 */
+/*global window: false, jQuery: false */
+(function($)
+{
+ function matchImages(str, isglobal)
+ {
+ var images, params;
+
+ params = isglobal ? 'ig' : 'i';
+ images = new RegExp("< *[img][^>]*[src] *= *[\"']{0,1}([^\"' >]*)[^>]*>", params);
+
+ return images.exec(str);
+ }
+
+ $.fn.qtip.preload = function(content)
+ {
+ var images = [], i, src;
+
+ // If supplied content is a jQuery DOM array, grab it's inner HTML
+ if(content.jquery && content.length > 0 && content.html) content = content.html();
+
+ // Find all images within the content
+ images = matchImages(content, true);
+ if(images && images.length > 0)
+ {
+ // Loop through each image
+ i = images.length; while(i--)
+ {
+ // Check if height and width are present and if so, skip this image
+ if(images[i].search(/^</i) < 0 || images[i].search(/(width|height){1} *= *["']{0,1}([^>]*)/i) > -1) continue;
+
+ // Grab the images src attribute
+ src = matchImages(images[i]);
+
+ // Append new image to document body and preload the image off screen
+ if(src && src.length > 1 && src[1])
+ $(document.body).append('<img src="'+src[1]+'" style="position: absolute; left: -10000em; " />');
+ }
+ }
+ };
+})(jQuery);

0 comments on commit f640fc1

Please sign in to comment.