Question

在my site我正在使用jQuery Popup Overlay加载我的图片，点击一个独立的叠加层。

在Chrome，Safari和Opera上，未缓存的独立图像加载和关闭就好了。但是，使用Firefox，在我从独立站点关闭加载的图像并打开另一个未缓存的图像后，将显示之前的独立图像，直到加载新图像。

HTML图片摘录：

<div id="main">
    <div class="content">
        <div class="pure-g">
            <div class="pure-u-1-1 pure-u-md-1-1 pure-u-lg-1 l-box">
                <figure>1.</figure><a class="initialism standalone_open btn btn-success" href="#"><img class="pure-img" data-fullsize="images/full-size/darron.jpg" src="images/thumbs/darron-large.jpg" alt="Darron"></a>
            </div>
            <div class="pure-u-1-1 pure-u-md-1-2 pure-u-lg-1-2 l-box">
                <figure>2.</figure><a class="initialism standalone_open btn btn-success" href="#"><img class="pure-img" data-fullsize="images/full-size/tree.jpg" src="images/thumbs/tree-small.jpg" alt="Tree"></a>
            </div>
        </div>
    </div>
</div>

<div id="standalone">
    <div class="overlay-control-container">
        <figure></figure>
    </div>
    <div class="overlay-image-container">
        <img class="pure-img">
    </div>
</div>

pure- *类用于PureCSS的响应式图像/网格。

JS：

$(document).ready(function () {

$('#standalone').popup({
  color: 'white',
  opacity: 1,
  transition: '0.3s',
  scrolllock: false,
  closeelement: '#standalone',
});

$(".pure-g img" ).on( "click", function( event ) {
var currentSrc= $(this).data("fullsize");
$("#standalone img").attr("src", currentSrc);
});

});

我不确定是什么导致了这一点。

编辑：

使用.removeAttr()方法解决。

正确的JS应该是：

$(".pure-g img" ).on( "click", function( event ) {
var currentSrc= $(this).data("fullsize");
$("#standalone img").removeAttr("src", currentSrc).attr("src", currentSrc);
});

Answer 1

这可以通过添加一行代码

轻松解决

var currentSrc= "";

在设置图片的来源（var currentSrc）之前等于$(this).data("fullsize);

所以你的功能就是这样

$(".pure-g .pure-img" ).on( "click", function( event ) {
    var currentSrc= "";
    currentSrc= $(this).data("fullsize");
    $("#standalone img").attr("src", currentSrc);
});

查看我的fiddle

编辑：

一个奇怪的解决方法，这个，但我在手机上重现了错误（最终）并且能够通过以下方式解决它

$(".pure-g .pure-img" ).on( "click", function( event ) {
    var currentSrc= null;
    currentSrc=" "; //doesn't work if you omit either of the first 2 lines
    currentSrc= $(this).data("fullsize");
    $("#standalone img").attr("src", currentSrc);
});

希望这有帮助

Firefox没有清除Jquery弹出叠加层上加载的最后一个图像

1 个答案: