1
喜 我與jQuery的頁面加載後裝上我的網站圖片,我使用$(文件)。就緒加載頁面加載後的圖像現在我想指定順序,所以我可以以某種方式加載我的幻燈片放映的圖像,並在幻燈片放映圖片加載顯示後隱藏我的幻燈片放映。加載圖像元素
這是我的代碼的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();
});
});
});
現在我想在加載所有圖像之前控制圖像加載並隱藏盒子並在加載頁面後顯示盒子
我該如何做這樣的工作?
感謝
我們可以詳細瞭解您的代碼嗎?它會幫助我們給你一個更準確的答案。 – 2011-04-22 14:11:05
那麼,你在服務器端使用什麼框架,以及如何檢索圖像?我們可以看照片嗎?這可能使最有意義的他們在服務器端進行排序,並返回一個巨大的名單,而不是讓AJAX的瘋狂數額的話費爲每一位,因爲這樣你可能必須使用同步AJAX對它們進行檢索,這是一種對AJAX的開始。但是,如果沒有代碼,我無法真正告訴你什麼。 – slandau 2011-04-22 14:11:50
@julkiewicz嗨親愛的朋友你是對的,但沒有真正的解決方案,我應該接受它?或者等待得到更好的答案? – amin 2011-04-22 16:04:20