diff --git a/RELEASE-NOTES.md b/RELEASE-NOTES.md index c68eb583a..3f7a07992 100644 --- a/RELEASE-NOTES.md +++ b/RELEASE-NOTES.md @@ -32,6 +32,7 @@ - **Form Validation** - Added `depends` validation rule setting which will only validate a field if another specified field is not empty - **Popup** - Added new settings `observeChanges`, which is enabled by default. This will add special mutation observers to trigger `destroy` when the element is removed from the document, preventing memory leaks. - **Visibility** - Added `onFixed` and `onUnfixed` callbacks for visibility `type: 'fixed'` **Documentation forthcoming** +- **Visibility** - Added `onLoad` and `onAllLoaded` callback for `type: 'image'` visibility - **Tab** - Added new setting `cacheType`, can either be `html` or `response` (default). HTML will cache resulting html after callbacks, `response` will cache the original response so that it can be played back identically on future loads #2534 - **Search** - Search now includes a `showNoResults` setting for determining whether no results messages should be shown **Documentation forthcoming** - **Search** - Added a new option `selectFirstResult`, which defaults to `false`. Will automatically highlight first result on search **Documentation forthcoming** @@ -44,6 +45,7 @@ **New Behaviors** - **Dropdown** - Added new convenience method `restore placeholder text` - **Progress** - Added progress `is complete` for returning whether success, warning, or error conditions are met +- **Image** - `transition hidden image` now shows correctly as `visibility: hidden;` and not `display: none`. This will allow `offset` with `visibility` and `sticky` to work more seamlessly. `hidden image` will still remain `display: none;` **CSS Enhancements** - **All UI** Extended variables which return exact pixel values in em (`@relativePX` and @px) up to 40px to allow for simple theming with exact values diff --git a/src/definitions/behaviors/visibility.js b/src/definitions/behaviors/visibility.js index 4bdf64bc9..0a5d27722 100644 --- a/src/definitions/behaviors/visibility.js +++ b/src/definitions/behaviors/visibility.js @@ -31,7 +31,10 @@ $.fn.visibility = function(parameters) { query = arguments[0], methodInvoked = (typeof query == 'string'), queryArguments = [].slice.call(arguments, 1), - returnedValue + returnedValue, + + moduleCount = $allModules.length, + loadedCount = 0 ; $allModules @@ -295,7 +298,13 @@ $.fn.visibility = function(parameters) { settings.onOnScreen = function() { module.debug('Image on screen', element); module.precache(src, function() { - module.set.image(src); + module.set.image(src, function() { + loadedCount++; + if(loadedCount == moduleCount) { + settings.onAllLoaded.call(this); + } + settings.onLoad.call(this); + }); }); }; } @@ -374,16 +383,16 @@ $.fn.visibility = function(parameters) { ; settings.onFixed.call(element); }, - image: function(src) { + image: function(src, callback) { $module .attr('src', src) ; if(settings.transition) { if( $.fn.transition !== undefined ) { - $module.transition(settings.transition, settings.duration); + $module.transition(settings.transition, settings.duration, callback); } else { - $module.fadeIn(settings.duration); + $module.fadeIn(settings.duration, callback); } } else { @@ -1244,6 +1253,10 @@ $.fn.visibility.settings = { onTopPassedReverse : false, onBottomPassedReverse : false, + // special callbacks for image + onLoad : function() {}, + onAllLoaded : function() {}, + // special callbacks for fixed position onFixed : function() {}, onUnfixed : function() {}, diff --git a/src/definitions/elements/image.less b/src/definitions/elements/image.less index d8d526079..b2fdd0cbe 100755 --- a/src/definitions/elements/image.less +++ b/src/definitions/elements/image.less @@ -19,6 +19,7 @@ @import (multiple) '../../theme.config'; + /******************************* Image *******************************/ @@ -51,6 +52,11 @@ img.ui.image { .ui.hidden.image { display: none; } +.ui.hidden.transition.images, +.ui.hidden.transition.image { + display: block; + visibility: hidden; +} .ui.disabled.images,