привет
я загружаю изображения на свой веб-сайт после загрузки страницы с помощью jquery, я использую $ (document) .ready, чтобы загрузить изображения после загрузки страницы, теперь я хочу указать порядок, чтобы я мог загрузить изображения из своего слайд-шоу таким образом и иметь свой слайд показать скрытое, после слайд-шоу загрузить изображение показать его.
это HTML-часть моего кода:
<a class="videoThumb imageLightbox" href="images/slider/pic-usa-11-large.jpg">
<img src="/images/blank.gif" class="delayLoad" onmouseover="this.src = './images/slider/pic-usa-11.jpg'" width=" 215px" height="160px"/>
</a>
и я загружаю изображения после того, как документ готов:
$(document).ready(function() {
// Load images once the page has loaded
jQuery("img.delayLoad").each(function() {
// Create a new span element which we will wrap around our image
// Using a span because if the image was inside an <a> tag then online inline elements should be used
var delaySpan = document.createElement("span");
with (jQuery(this)) {
// Handle images that are hidden, otherwise display mode for the span should be block (inline doesn't work properly)
if (css('display') == 'none') {
var _display = 'none' } else {
var _display = 'block' }
// Copy the style from the image into a new object (this means you don't need to worry about styling this span within your CSS)
var cssObj = {
'height' : css('height'),
'width' : css('width'),
'margin-top' : css('margin-top'),
'margin-right' : css('margin-right'),
'margin-bottom' : css('margin-bottom'),
'margin-left' : css('margin-left'),
'background-image' : css('background-image'),
'background-color' : css('background-color'),
'background-repeat' : css('background-repeat'),
// Hack for now, becuase IE doesn't seem to read the background-position property correctly
'background-position' : '50% 50%',
'display' : _display
}
}
// Apply our style properties to our span
jQuery(delaySpan).css(cssObj);
// Wrap the image in the span
jQuery(this).wrap(delaySpan)
// Hide the image (leaving just the span visible
.hide()
// Simulate the mouse over the image, whcih will cause it to switch the img src
.mouseover()
// Remove the mouseover attribute (since we don't want to update the img src every time the user does a mouseover
.removeAttr("onmouseover")
// Simulate the mouse moving out of the image (To reset the image to its normal state)
.mouseout()
// Once the image is loaded, perform a function
.load(function () {
// Fade the image in
// Remove the span by unwrapping the image
jQuery(this).fadeIn().unwrap();
});
});
});
(я использовал этот документ: http://www.purplepixelmedia.co.uk/Ourblog/tabid/78/articleType/ArticleView/articleId/80/Using-jQuery-to-loading-images-after-the-page-is-ready.aspx)
теперь я хочу контролировать загрузку изображений и скрывать поле до загрузки всех изображений и показывать окно после загрузки страницы
как я могу выполнить такую задачу?
спасибо