Question

我想要一个函数来查找具有.fancybox类的所有锚点，然后将它们的图像加载到浏览器缓存中，以便在页面完全加载后快速访问。

现在我正在做一些可以快速缓存图像的东西（允许它们在你第一次点击Fancybox锚点时立即弹出），但它不是一个动态生成的列表，所以你需要手动添加每个图片链接。

以下是代码：

$(window).load(function(){
$('<div style="display:none;"><img src="..." /><img src="..." /></div>')
    .appendTo("body");
});

如何使用在锚点内找到的href，为每个具有.fancybox类的锚标记的实例动态构建图像列表和src =“...”？

谢谢，斯科特。

Answer 1

你会尝试这样的事情：

$(".fancybox").each(function() {

   $(this).attr('src', 'PATH TO IMAGE');

});

你也可以在之前为它准备一份scle的图像列表，然后放下每一个元素（根据一些计数器）：

var imagesSrc =   [ "src1\folder1\...", "src2\...", ....]

Answer 2

这样的事情会起作用吗？

$(document).ready(function(){
   var imgs = [];                   // array of jQuery objects
   $("a.fancybox").each(function(){
      imgs.push($('<img src="' + $(this).attr('href') + '" />');
   });
});

而不是push push可能是pushStack？

Answer 3

每当您分配src属性时，浏览器都会加载图片：

$('a.fancybox').each(function() { 
  var img = new Image();
  img.src = this.href; // Browsers start loading the file at this point
});

Answer 4

感谢您的建议，他们让我指出了正确的方向。我发现最容易的事情是在页面完全加载后，包括所有图像，单独追加找到的每个图像。

    $(window).load(function() {
        $('a.fancybox').each(function() {
            $('<div><img style="display:none;" src="' + this.href + '" alt="" /></div>')
            .appendTo("body");
        });
    });

如何使用jQuery $（'...'）和.load（）以及Fancybox动态构建要附加到body的HTML列表

4 个答案: