Постепенно появляясь фоновое изображение
Мы можем использовать приведенный ниже скрипт для отключения индексов
ALTER INDEX ALL ON [TableName]
DISABLE;
Сделайте массовую вставку в таблицу и затем запустите следующий скрипт.
ALTER INDEX ALL ON [TableName]
REBUILD;
4 ответа
Эта статья может быть полезной. Копирование оттуда:
HTML
<div id="loader" class="loading"></div>
CSS
DIV#loader {
border: 1px solid #ccc;
width: 500px;
height: 500px;
}
/**
* While we're having the loading class set.
* Removig it, will remove the loading message
*/
DIV#loader.loading {
background: url(images/spinner.gif) no-repeat center center;
}
Javascript
// when the DOM is ready
$(function () {
var img = new Image();
// wrap our new image in jQuery, then:
$(img)
// once the image has loaded, execute this code
.load(function () {
// set the image hidden by default
$(this).hide();
// with the holding div #loader, apply:
$('#loader')
// remove the loading class (so no background spinner),
.removeClass('loading')
// then insert our image
.append(this);
// fade our image in to create a nice effect
$(this).fadeIn();
})
// if there was an error loading the image, react accordingly
.error(function () {
// notify the user that the image could not be loaded
})
// *finally*, set the src attribute of the new image to our image
.attr('src', 'images/headshot.jpg');
});
Вы можете сначала загрузить изображение, а затем, когда оно завершится, установить его как фоновое изображение. Таким образом, браузер (надеюсь) загрузит фоновое изображение из кеша вместо его повторной загрузки. Вы запросили его как плагин:
$.fn.smartBackgroundImage = function(url){
var t = this;
//create an img so the browser will download the image:
$('<img />')
.attr('src', url)
.load(function(){ //attach onload to set background-image
t.each(function(){
$(this).css('backgroundImage', 'url('+url+')' );
});
});
return this;
}
Используйте его так:
$('body').smartBackgroundImage('http://example.com/image.png');
Вы можете использовать следующий трюк, извините, если он немного грязный.
Скрипт:
jQuery.preloadImages = function() {
for (var i = 0; i < arguments.length; i++) {
jQuery("<img>").attr("src", arguments[i]);
$('.box1').attr('preloadURL', arguments[0]);
}
}
$.preloadImages("sky.jpg");
$(document).ready(function() {
if ($('.box1').attr('preloadURL') == 'sky.jpg') {
$('.box1').css({ 'background-image': 'url(sky.jpg)' },$('.box1').fadeIn(1000));
}
});
Разметка:
<div class="Content">
<label>Search Bing</label>
<input type="text" />
<input type="button" value="search" />
</div>
<div class="box1"></div>
css:
.box1 {background-repeat:no-repeat; width:800px; height:600px; display:none; position:relative;}
.Content { position:absolute; left:20px; top:20px; z-index:100;}
.Content label { color:White;}
надеюсь, что это поможет
Немного пример на: http://xgreen.co.uk/test.htm
Вы не можете использовать фоновые изображения CSS, потому что невозможно прикрепить событие к загрузке изображений (насколько я знаю).
Так что я дам ему выстрел, но не тестировал:
HTML:
<body>
<div class="bgimage"><img src="/bgimage.jpg" ></div>
<div>
... content ...
</div>
</body>
CSS:
.bgimage { position: absolute: }
Javascript:
$(function() {
$(".bgimage")
.css("opacity",0);
.load(function() { $(this).fadeIn(); });
});