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 ready函数

加载和定位图像，加载另一个图像

1 个答案: