问题
I have a group of images within a <div>
. All these images are served through a 302 instead of a 200 for security purposes (servlet serving image based on authentication).
I would like to clone that <div>
and append it to another container.
When doing so in all browsers except Firefox, the images are not reloaded. It appears those browsers understand it's the same image.
In Firefox, each image is reloaded after the clone/append. I'd like to avoid that. Does anyone have any recommendations on how?
UPDATED with code example:
<div>
<p><button type="button" id="btn1">Clone 1</button> <button type="button" id="btn2">Clone 2</button></p>
</div>
<div id="group1">
<div id="imgs">
<p><img src="https://example.com/image/9c90434ed657427dad29"></p>
<p><img src="https://example.com/image/977b5dfe5e064880b164"></p>
<p><img src="https://example.com/image/8f22d7fd2a2343ab99c9"></p>
<p><img src="https://example.com/image/898c022e20b742c88ae6"></p>
<p><img src="https://example.com/image/8319fe1d23064b5d8011"></p>
</div>
</div>
<div id="group2"></div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#btn1").click(function(){
$("#imgs").clone().appendTo("#group1");
});
$("#btn2").click(function(){
$("#imgs").clone().appendTo("#group2");
});
});
</script>
回答1:
Try adding prefetch tags for Firefox users. I believe FF still supports the prefetch relationship; they did come up with it.
<link rel="prefetch" src="https://example.com/image/9c90434ed657427dad29">
<link rel="prefetch" src="https://example.com/image/977b5dfe5e064880b164">
<link rel="prefetch" src="https://example.com/image/8f22d7fd2a2343ab99c9">
<link rel="prefetch" src="https://example.com/image/898c022e20b742c88ae6">
<link rel="prefetch" src="https://example.com/image/8319fe1d23064b5d8011">
来源:https://stackoverflow.com/questions/7590106/jquery-clone-and-302-image-sources-how-to-avoid-reloading-in-firefox