Question

我想要的是，在页面加载之前，它会获取页面上的所有图像，并将它们放在一个单独的部门中。
例如。该页面有5个图像 - eg1.png，eg2.jpg，eg3.bmp，eg4.jpg，eg5.png。现在，在页面开始加载之前，所有图像都保留在页面中，但也会转到ID为“预先”的分区。我希望这是动态完成的，这样如果我改变页面上的图像，分区上的图像也会改变。
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>

Answer 1

我已将图片放入div，其中'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'));
});

Answer 2

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

和简单的jQuery函数，你需要什么

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

Answer 3

您可以做的是首先获取所有图像源，将其添加到数组中。然后将这些图像加载到缓存并在前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中有多少图像。

如何获取页面上所有图像的来源，然后将它们全部放在一个部门中

3 个答案: