better icon loading for firefox

This commit is contained in:
rolux 2010-09-11 10:59:40 +02:00
parent 34f655104a
commit 1d00e6dc2e
6 changed files with 29 additions and 17 deletions

View file

@ -165,7 +165,7 @@ Lists
================================================================================ ================================================================================
*/ */
.OxThemeClassic .OxIconList .OxItem > .OxIcon img.OxLoading { .OxThemeClassic .OxIconList .OxItem img.OxLoading {
border-color: rgb(208, 208, 208); border-color: rgb(208, 208, 208);
background: -moz-linear-gradient(top, rgb(255, 255, 255), rgb(224, 224, 224)); background: -moz-linear-gradient(top, rgb(255, 255, 255), rgb(224, 224, 224));
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgb(255, 255, 255)), color-stop(1, rgb(224, 224, 224))); background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgb(255, 255, 255)), color-stop(1, rgb(224, 224, 224)));

View file

@ -692,7 +692,7 @@ Lists
.OxIconList .OxItem > .OxIcon, .OxIconList .OxItem > .OxIcon,
.OxIconList .OxItem > .OxText { .OxIconList .OxItem > .OxText {
left: -2px; //left: -2px;
} }
.OxIconList .OxItem > .OxIcon img { .OxIconList .OxItem > .OxIcon img {

View file

@ -146,7 +146,7 @@ Lists
================================================================================ ================================================================================
*/ */
.OxThemeModern .OxIconList .OxItem > .OxIcon img.OxLoading { .OxThemeModern .OxIconList .OxItem img.OxLoading {
border-color: rgb(48, 48, 48); border-color: rgb(48, 48, 48);
background: -moz-linear-gradient(top, rgb(32, 32, 32), rgb(0, 0, 0)); background: -moz-linear-gradient(top, rgb(32, 32, 32), rgb(0, 0, 0));
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgb(32, 32, 32)), color-stop(1, rgb(0, 0, 0))); background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgb(32, 32, 32)), color-stop(1, rgb(0, 0, 0)));

View file

@ -1731,7 +1731,7 @@ Ox.wordwrap = function(str, len, sep, bal, spa) {
>>> Ox.wordwrap("These are short words", 16, "<br/>", true) >>> Ox.wordwrap("These are short words", 16, "<br/>", true)
These are <br/>short words These are <br/>short words
*/ */
var str = str.toString(), var str = str === null ? '' : str.toString(),
len = len || 80, len = len || 80,
sep = sep || "<br/>", sep = sep || "<br/>",
bal = bal || false, bal = bal || false,

View file

@ -5719,7 +5719,7 @@ requires
height: self.options.size * 1.5, height: self.options.size * 1.5,
lineLength: self.options.size == 64 ? 17 : 23, lineLength: self.options.size == 64 ? 17 : 23,
lines: self.options.size == 64 ? 4 : 5, lines: self.options.size == 64 ? 4 : 5,
url: oxui.path + '/png/ox.ui.' + Ox.theme() + '/icon.png', url: oxui.path + '/png/ox.ui/transparent.png',
width: self.options.size width: self.options.size
}); });
self.title = formatText(self.options.title, self.lines - 1, self.lineLength); self.title = formatText(self.options.title, self.lines - 1, self.lineLength);
@ -5732,14 +5732,14 @@ requires
that.$icon = $('<div>') that.$icon = $('<div>')
.addClass('OxIcon') .addClass('OxIcon')
.css({ .css({
top: self.options.size == 64 ? -68 : -120, top: self.options.size == 64 ? -72 : -124,
width: (self.options.size + 4) + 'px', width: (self.options.size + 4) + 'px',
height: self.options.size + 'px' height: (self.options.size + 4) + 'px'
}); });
that.$iconImage = $('<img>') that.$iconImage = $('<img>')
.addClass('OxLoading OxTarget') .addClass('OxLoading OxTarget')
.attr({ .attr({
src: self.options.url src: self.url
}) })
.css({ .css({
width: self.options.width + 'px', width: self.options.width + 'px',
@ -5748,7 +5748,7 @@ requires
.mousedown(mousedown) .mousedown(mousedown)
.mouseenter(mouseenter) .mouseenter(mouseenter)
.mouseleave(mouseleave) .mouseleave(mouseleave)
.load(load); .one('load', load);
that.$textBox = $('<div>') that.$textBox = $('<div>')
.addClass('OxText') .addClass('OxText')
.css({ .css({
@ -5770,17 +5770,19 @@ requires
.addClass('OxReflection') .addClass('OxReflection')
.css({ .css({
top: self.options.size + 'px', top: self.options.size + 'px',
width: self.options.size + 'px', width: (self.options.size + 4) + 'px',
height: (self.options.size / 2) + 'px' height: (self.options.size / 2) + 'px'
}); });
that.$reflectionImage = $('<img>') that.$reflectionImage = $('<img>')
.addClass('OxLoading') .addClass('OxLoading')
.attr({ .attr({
src: self.options.url src: self.url
}) })
.css({ .css({
width: self.options.width + 'px', width: self.options.width + 'px',
height: self.options.height + 'px' height: self.options.height + 'px',
// firefox is 1px off when centering images with odd width and scaleY(-1)
paddingLeft: ($.browser.mozilla && self.options.width % 2 ? 1 : 0) + 'px'
}); });
that.$gradient = $('<div>') that.$gradient = $('<div>')
.css({ .css({
@ -5821,8 +5823,16 @@ requires
} }
function load() { function load() {
that.$iconImage.attr({
src: self.options.url
})
.one('load', function() {
that.$iconImage.removeClass('OxLoading'); that.$iconImage.removeClass('OxLoading');
that.$reflectionImage.removeClass('OxLoading'); that.$reflectionImage.removeClass('OxLoading');
});
that.$reflectionImage.attr({
src: self.options.url
});
} }
function mousedown(e) { function mousedown(e) {
@ -6071,9 +6081,11 @@ requires
} }
function getPage() { function getPage() {
return self.options.orientation == 'horizontal' return Math.max(
? Math.floor((that.scrollLeft() - self.listMargin / 2) / self.pageWidth) Math.floor(self.options.orientation == 'horizontal' ?
: Math.floor((that.scrollTop() - self.listMargin / 2) / self.pageHeight); (that.scrollLeft() - self.listMargin / 2) / self.pageWidth :
(that.scrollTop() - self.listMargin / 2) / self.pageHeight
), 0);
} }
function getPositions() { function getPositions() {

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.7 KiB