Question

我正在尝试制作图片库。当我点击图片时，我调整了它的大小并将其淡入。它在Firefox和Internet Explorer中运行良好，但在Chrome中却落后了。我试了好几天才解决问题，但找不到答案。我缩小了我认为的问题。如果我删除类'.resize'，它将图像重新调整到适合页面，它看起来很糟糕但它工作正常。问题只发生在大图像上。我尝试了.load（），但似乎没有用。最荒谬的想法是，如果没有那一课，一切都会奏效。

这是我的代码：

HTML：

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>Gallery</title>
    <link rel="stylesheet" href="Gallery.css">
</head>
<body>

<div class="gallery">
    <div class="images">
        <ul class="resize">
            <li><img src="img/img1.jpg" alt="image1"></li>
            <li><img src="img/img2.jpg" alt="image2"></li>
            <li><img src="img/img3.jpg" alt="image3"></li>
            <li><img src="img/img4.jpg" alt="image4"></li>
            <li><img src="img/img5.jpg" alt="image5"></li>
            <li><img src="img/img6.jpg" alt="image6"></li>
            <li><img src="img/img7.jpg" alt="image7"></li>
            <li><img src="img/img8.jpg" alt="image8"></li>
        </ul>
    </div>
    <div class="clear"></div>
    <div class="backgroundOpacity"></div>
    <div class="imageBox">
        <img class="displayImage" src="" alt="displayImage">
        <img class="loadingGif" src="img/loading.gif" alt="loadgindGif">
        <img class="closeImage" src="img/closeImage.png" alt="close">
        <p class="imageNumber">1</p>
    </div>
</div>

<script type="text/javascript" src="jquery-1.8.2.js"></script>
<script type="text/javascript" src="Gallery.js"></script>
<script type="text/javascript">
window.onload = function(){
    var content = $('.gallery'),
        gallery = new Gallery(content);
}
</script>

</body>
</html>

CSS：

*{
    margin: 0;
    padding: 0;
}
/*-------------------------gallery-----------------------*/
.gallery{
    width: 1400px;
    margin: 100px auto 0;
}
/*------------------------------------------------*/
/*-------------------------images-----------------------*/
.images{
    width: inherit;
    height: inherit;
}
.images li{
    list-style-type: none;
    float: left;
    margin: 0 20px 20px 0;
    width: 300px;
    height: 150px;
    cursor: pointer;
    padding: 5px;
    border: solid 1px #CCC;
    -moz-box-shadow: 1px 1px 5px #999;
    -webkit-box-shadow: 1px 1px 5px #999;
    box-shadow: 1px 1px 5px #999;
}
.resize img{
    width: 300px;
    height: 150px;
}
/*------------------------------------------------*/
/*-------------------------imageBox-----------------------*/
.imageBox{
    background-color: white;
    clear: both;
    width: 300px;
    height: 150px;
    display: none;
    position: fixed;
    overflow: visible;
}
.backgroundOpacity{
    background-color: black;
    width: 5000px;
    height: 5000px;
    position: fixed;
    left: 0px;
    top: 0px;
    opacity: 0.7;
    display: none;
}
.loadingGif{
    display: block;
    position: absolute;
}
.displayImage{
    display: none;
}
.closeImage{
    position: absolute;
    top: -10px;
    right: -10px;
    cursor: pointer;
}
.imageNumber{
    position: absolute;
    bottom: 0px;
    left: 0px;
    font-family: sans-serif;
    font-size: 18px;
    font-weight: bold;
    opacity: 0.6;
}
/*------------------------------------------------*/
.clear{
    clear: both;
}

javascript：

function Gallery (galleryDiv, resizeDuration, freeSpace) {
    this.config = {
        resizeDuration: 600,
        freeSpace: 100
    };

    this.galleryDiv = galleryDiv;

    this.imagesUl = this.galleryDiv.find('.images ul');
    this.images = this.imagesUl.find('img');
    this.backgroundOpacity = this.galleryDiv.find('.backgroundOpacity'); // the background div which when is clicked hides the imageBox
    this.imageBox = this.galleryDiv.find('.imageBox'); // where the images will be displayed when they'r clicked
    this.closeButton = this.imageBox.find('.closeImage'); // top-right x
    this.loadingGif = this.imageBox.find('.loadingGif'); // the animated gif that gives the effect of 'loading'
    this.imageNumber = this.imageBox.find('.imageNumber'); // bottom-left text
    this.displayImage = this.imageBox.find('.displayImage'); // image to be displayed


    this.currentImageIndex; // index of the current image
    this.imagesWidth = new Array(); // the images default widths
    this.imagesHeight = new Array(); // the images default heights
    this.imagesSrc = new Array(); // the location of the images
    this.imagesLength = this.images.length // number of images
    this.imageBoxSize = new Array(); // [0] is width, [1] is height
    this.loadingGifSize = new Array() // [0] is width, [1] is height
    this.canceled; // if loading procress was canceled this variable will alert the show function


    this.freeSpace = freeSpace || this.config.freeSpace; // spcea between imageBox and window
    this.resizeDuration = resizeDuration || this.config.resizeDuration; // duration to resize imageBox

    this.init();
};

Gallery.prototype.init = function () { // puts things in move
    this.getImageAttributes().bind();

    return this;
};

Gallery.prototype.bind = function () { // bind events 
    var self = this;
    this.images.on('click', function () {
        self.currentImageIndex = $(self.images).index( $(this) );
        self.canceled = 0;
        self.showImage();
    });

    $(window).on('resize', function () { // center the imagebox whenever the window is resized
        self.centerImageBox(self.imageBoxSize[0], self.imageBoxSize[1]);
    });

    $(this.closeButton).on('click', function () { // hide the image
        self.hideImage();
    });

    $(this.backgroundOpacity).on('click', function () {
        self.hideImage();
        self.canceled = 1;
    });

    return this;
};

Gallery.prototype.getImageAttributes = function () { // get the default images sizes
    var self = this;

    this.imagesUl.removeClass('resize');
    $.each(this.images, function (index, value) {
        self.imagesWidth[index] = value.width;
        self.imagesHeight[index] = value.height;
        self.imagesSrc[index] = $(value).attr('src');
    });
    this.imagesUl.addClass('resize');

    this.imageBox.show();
    this.loadingGifSize = [this.loadingGif.width(), this.loadingGif.height()];
    this.imageBox.hide();

    return this;
};

Gallery.prototype.showImage = function () { // shows the image when it is clicked
    var self = this,
        index = this.currentImageIndex,
        imageSize = new Array(), // [0] is width, [1] is height,
        imageBoxHeight, imageBoxWidth;
    //show imageBox and resize it
    imageSize = this.resizeImage();
    this.imageBoxSize = [imageSize[0], imageSize[1]]; // captures the current imageBox size
    this.imageNumber.text('Image ' + (index+1) + ' of ' + this.imagesLength); // set bottom-left text
    this.displayImage.attr('src', this.imagesSrc[index]).css({
        'width': imageSize[0],
        'height': imageSize[1]
    });
    this.backgroundOpacity.show();
    this.imageBox.show();
    this.loadingGif.show();

    this.imageBox.animate({
        'width': imageSize[0],
        'height': imageSize[1]
    },{
        duration: self.resizeDuration,
        step: function () {
            // center the image box with every resize;
            imageBoxWidth = self.imageBox.width();
            imageBoxHeight = self.imageBox.height();
            self.centerImageBox(imageBoxWidth, imageBoxHeight, 1);
            // center the loadingGif
            self.loadingGif.css({
                'right': (imageBoxWidth - self.loadingGifSize[0])/2,
                'top': (imageBoxHeight - self.loadingGifSize[1])/2
            });
        },
        complete: function () {
            if(!self.canceled){
                self.closeButton.show();
                self.imageNumber.show();
                self.loadingGif.hide();
                self.displayImage.fadeIn(500);
            }
                else self.hideImage();
        }
    });


    return this;
};

Gallery.prototype.hideImage = function () { // hide the image
    //reset imageBox and other elements atributes
    this.imageBox.css({
        'width': '300px',
        'height': '300px'
    });
    this.imageBox.hide();
    this.backgroundOpacity.hide();
    this.closeButton.hide();
    this.imageNumber.hide();
    this.displayImage.hide();

    return this;
};

Gallery.prototype.resizeImage = function () { // resize the image to the current monitor size
    var index = this.currentImageIndex,
        imageWidth = this.imagesWidth[index], imageHeight = this.imagesHeight[index],
        windowWidth = $(window).width(), windowHeight = $(window).height(),
        ratio = imageWidth / imageHeight;

    while(imageWidth > (windowWidth - this.freeSpace) || imageHeight > (windowHeight-this.freeSpace)){
        if(imageWidth > windowWidth){
            imageWidth = windowWidth - this.freeSpace;
            imageHeight = imageWidth / ratio;
        }
        else{
            imageHeight = windowHeight - this.freeSpace;
            imageWidth = imageHeight * ratio;
        }
    }

    return [imageWidth, imageHeight];
};

Gallery.prototype.centerImageBox = function (width, height, resize) { // if animated parameter is specified, the imageBox will not pe resized
    var windowWidth = $(window).width(),
        windowHeight = $(window).height(),
        index =  this.currentImageIndex,
        imageSize = new Array(), // [0] is width, [1] is height
        imageDefaultWidth = this.imagesWidth[index], imageDefaultHeight = this.imagesHeight[index];

    if(windowWidth < 200 || windowHeight < 200) this.imageBox.hide(); // if the window is too small, hide the imageBox, otherwise it looks silly
        else if(this.backgroundOpacity.css('display') === 'block') this.imageBox.show();
    this.imageBox.css({
        'right': (windowWidth - width)/2, 
        'top': (windowHeight - height)/2
    });
    // resize the image and the imageBox, if the imageBox is bigger than the window, or the image can be bigger
    if(!resize){
        imageSize = this.resizeImage();
        width = imageSize[0];
        height = imageSize[1];
        this.imageBoxSize = [width, height];

        this.imageBox.css({
            'width': width,
            'height': height,
            'right': (windowWidth - width)/2, 
            'top': (windowHeight - height)/2
        });
        this.displayImage.css({
            'width': imageSize[0],
            'height': imageSize[1]
        });
    }

    return this;
};

如果有人能帮助我，我将不胜感激。

根据要求，这是项目http://jsfiddle.net/uaD5s/6/的一个小提琴。应该从一开始就这样做了，抱歉。

Answer 1

稍微调整一下脚本，无论图像大小如何，我都找到了防止滞后的方法。

我们创建了一个位于图像顶部的白色封面叠加层，而不是淡入图像

<div class="imageBox">
    <div class='cover'></div> // <<<< Added Cover Overlay
    <img class="displayImage" src="" alt="displayImage">
    <img class="loadingGif" src="img/loading.gif" alt="loadgindGif">
    <img class="closeImage" src="img/closeImage.png" alt="close">
    <p class="imageNumber">1</p>
</div>

然后我们添加这个CSS来设置封面

.cover { 
     position:absolute;
     width:100%; height:100%;
     z-index:10;
     background-color:white;
     display:block;
 }

最后，当图像完全显示时，我们.fadeOut（）封面而不是最初写入的图像中的淡入淡出。

原来这个

 self.displayImage.fadeIn(500);

现在改为

self.displayImage.show(function(){
   $('.cover').fadeOut(500);
     });

这是一个在行动中看到它的小提琴......

FIDDLE

为了确保重置封面，需要将其添加到“重置”功能

$('.cover').show();

这是应添加的功能。

Gallery.prototype.hideImage = function () { // hide the image
    //reset imageBox and other elements atributes
    this.imageBox.css({
        'width': '300px',
        'height': '300px'
    });
    this.imageBox.hide();
    this.backgroundOpacity.hide();
    this.closeButton.hide();
    this.imageNumber.hide();
    this.displayImage.hide();
    $('.cover').show(); // <<<< Add the Script Here

    return this;
};

Jquery在Chrome中褪色

1 个答案: