-2

我想要的是在页面加载之前，它会获取页面上的所有图像，并将它们放入一个单独的分区中。
例如。该页面有 5 张图片 - eg1.png、eg2.jpg、eg3.bmp、eg4.jpg、eg5.png。现在在页面开始加载之前，所有图像都保留在页面中，但也会进入 id'pre' 的分区。我希望这是动态完成的，这样如果我更改页面上的图像，分区上的图像也会更改。
HTML:-

<div id="content-wrapper">
     <img src="eg1.png">
     <img src="eg2.jpg">
     <img src="eg3.bmp">
     <img src="eg4.jpg">
     <img src="eg5.png">
</div>
<div id="pre">//all the images in 'content-wrapper' should also appear here//</div>
4

3 回答 3

1

我已将图像放入 adiv中，并将“pre”设置为 id：

$('img').each(function(){
  var src = $(this).attr('src');
  $('#pre').append("<img src='"+ src +"' /><br>");
});

但是当我更改src属性时：

$("img").one("load", function() {
    alert($(this).attr('src'));
});
于 2013-11-03T07:26:30.640 回答
0

您可以做的是首先获取所有图像源，将其添加到数组中。然后加载这些图像以缓存并在 pre div 中显示它们。在此之前，在 pre div 中显示某物的 LOADING 图像。并且还使分割内容包装器显示：无，以便用户无法看到幕后发生的事情。这是代码

var $images = $("#content-wrapper img");

//in case you want to show progress bar
var $totalImages = $images.length;

//lets make a array to hold the images
var $imageHolder = []; 

//now lets add the images to cache

$images.each(function(i){
     var $img = new Image();
     $img.onload = function(){
           $imageHolder.push($img); 
           }
     $img.src = $(this).attr('src');
     });

//now that all your images are loaded into the cache add them to your div
$.each($imageHolder,function(i,item){
$("#pre").append(item);
});

//Done

这将是完全动态的，无论您在包装器 div 中有多少图像。

于 2013-11-03T06:30:18.780 回答
0

这是您的示例代码http://jsfiddle.net/fpWWT/1/

和简单的 jQuery 函数满足您的需要

$('img').each(function(){
 var src = $(this).attr('src')+'<br>';
  $('#pre').append(src);
});
于 2013-11-03T06:22:16.390 回答