加載和定位圖像，當其他圖像加載時

Question

加載和定位我的一個圖像時出現小問題。最小的一個。我正在使用spacegallery腳本（http://www.eyecon.ro/spacegallery/）。

它的加載效果不錯，但我希望它可以放在更大圖像的角落，當我第一次加載我的頁面時，它沒有定位，當我重新加載它時 - 一切正常，但第一次加載是錯的。

這裏是屏幕： 這是第一負載，而無需刷新網站：

first load http://derivativeofln.com/withoutload.png

第二個及以後的負荷：

second load http://derivativeofln.com/withload.png

我的HTML：

<div id="myGallery" class="spacegallery"> 

    <img class="imaz" src=http://derivativeofln.com/magnifier.jpg /> 
    <img class="aaa" src=images/bw1.jpg alt="" atr1="bw1" /> 
    <img class="aaa" src=images/bw2.jpg alt="" atr1="bw2" /> 
    <img class="aaa" src=images/bw3.jpg alt="" atr1="bw3" /> 

      </div>  

我的CSS：

#myGallery0 { 
width: 100%; 
height: 300px; 
} 

#myGallery0 img { 
border: 2px solid #52697E; 
} 

a.loading { 
background: #fff url(../images/ajax_small.gif) no-repeat center; 
} 

.imaz { 
z-index: 10000; 
} 


.imaz img{ 
position: absolute; 
left:10px; 
top:10px; 
z-index: 10000; 
width: 35px; 
height: 35px; 
} 

我Jquery的主要腳本文件：（第一定位指令是在底部，可以隨意向下滾動：））

(function($){ 
    EYE.extend({ 

    spacegallery: { 



     animated: false, 

     //position images 
     positionImages: function(el) { 

      var top = 0; 

      EYE.spacegallery.animated = false; 
      $(el) 
       .find('a') 
        .removeClass(el.spacegalleryCfg.loadingClass) 
        .end() 
        .find('img.aaa') 
        .removeAttr('height') 
        .each(function(nr){ 
         var newWidth = this.spacegallery.origWidth - (this.spacegallery.origWidth - this.spacegallery.origWidth * el.spacegalleryCfg.minScale) * el.spacegalleryCfg.asins[nr]; 

         $(this) 
          .css({ 
           top: el.spacegalleryCfg.tops[nr] + 'px', 
           marginLeft: - parseInt((newWidth + el.spacegalleryCfg.border)/2, 10) + 'px', 
           opacity: 1 - el.spacegalleryCfg.asins[nr] 
          }) 
          .attr('width', parseInt(newWidth)); 
         this.spacegallery.next = el.spacegalleryCfg.asins[nr+1]; 
         this.spacegallery.nextTop = el.spacegalleryCfg.tops[nr+1] - el.spacegalleryCfg.tops[nr]; 
         this.spacegallery.origTop = el.spacegalleryCfg.tops[nr]; 
         this.spacegallery.opacity = 1 - el.spacegalleryCfg.asins[nr]; 
         this.spacegallery.increment = el.spacegalleryCfg.asins[nr] - this.spacegallery.next; 
         this.spacegallery.current = el.spacegalleryCfg.asins[nr]; 
         this.spacegallery.width = newWidth; 
        }) 

     }, 


     //constructor 
     init: function(opt) { 
      opt = $.extend({}, EYE.spacegallery.defaults, opt||{}); 
      return this.each(function(){ 
       var el = this; 
       if ($(el).is('.spacegallery')) { 
        $('<a href="#"></a>') 
         .appendTo(this) 
         .addClass(opt.loadingClass) 
         .bind('click', EYE.spacegallery.next); 

        el.spacegalleryCfg = opt; 
        var listunia, images2 = [], index; 
        listunia = el.getElementsByTagName("img"); 

        for (index = 1; index < listunia.length; ++index) { 
         images2.push(listunia[index]); 
        } 


        el.spacegalleryCfg.images = images2.length;    
        el.spacegalleryCfg.loaded = 0; 
        el.spacegalleryCfg.asin = Math.asin(1); 
        el.spacegalleryCfg.asins = {}; 
        el.spacegalleryCfg.tops = {}; 
        el.spacegalleryCfg.increment = parseInt(el.spacegalleryCfg.perspective/el.spacegalleryCfg.images, 10); 
        var top = 0; 

        $('img.aaa', el) 
         .each(function(nr){ 
          var imgEl = new Image(); 
          var elImg = this; 

          el.spacegalleryCfg.asins[nr] = 1 - Math.asin((nr+1)/el.spacegalleryCfg.images)/el.spacegalleryCfg.asin; 
          top += el.spacegalleryCfg.increment - el.spacegalleryCfg.increment * el.spacegalleryCfg.asins[nr]; 
          el.spacegalleryCfg.tops[nr] = top; 
          elImg.spacegallery = {}; 
          imgEl.src = this.src; 
          if (imgEl.complete) { 

           el.spacegalleryCfg.loaded ++; 
           elImg.spacegallery.origWidth = imgEl.width; 
           elImg.spacegallery.origHeight = imgEl.height 
          } else { 
           imgEl.onload = function() { 
            el.spacegalleryCfg.loaded ++; 
            elImg.spacegallery.origWidth = imgEl.width; 
            elImg.spacegallery.origHeight = imgEl.height 
            if (el.spacegalleryCfg.loaded == el.spacegalleryCfg.images) { 

             EYE.spacegallery.positionImages(el); 

            } 
           }; 
          } 
         }); 




        el.spacegalleryCfg.asins[el.spacegalleryCfg.images] = el.spacegalleryCfg.asins[el.spacegalleryCfg.images - 1] * 1.3; 
        el.spacegalleryCfg.tops[el.spacegalleryCfg.images] = el.spacegalleryCfg.tops[el.spacegalleryCfg.images - 1] * 1.3; 
        if (el.spacegalleryCfg.loaded == el.spacegalleryCfg.images) { 


          if(el.spacegalleryCfg.images == 3){ 
          $('img.imaz', this).css('top', '27px'); // HERE IS POSITIONING OF MY IMAGES, WHEN SCRIPT LOADS FOR THE FIRST TIME! 
          $('img.imaz', this).css('left', (($(el).find('img.aaa:last').width())/2 + 77) + 'px'); 
          } 
          else if(el.spacegalleryCfg.images==2){ 
           $('img.imaz', this).css('top', '33px');  
           $('img.imaz', this).css('left', (($(el).find('img.aaa:last').width())/2 + 77) + 'px'); // HERE IT ENDS:) 
          } 

         EYE.spacegallery.positionImages(el); 
        } 
       } 
      }); 
     } 
    } 
}); 
})(jQuery); 

Answer 1

這似乎是一個緩存的事情 嘗試在html上指定圖像尺寸（寬度和高度），因爲在第一次加載時（圖像不在緩存中），瀏覽器僅在加載後知道尺寸，並且定位可能不正確。

在替代

當文檔被裝載

$(document).ready(«your poisitioning function here») 

看到http://api.jquery.com/ready/爲jQuery的準備功能