javascript - 获取计数器要计数的数字范围

Question

我是 making a site使用FreeWall当我使用 appendBlock 方法向墙上添加新 block 时遇到了麻烦。当我添加新 block 时，我会再次获得与已有相同的 block 。

这是我的代码(JavaScript):

// Populate grid with initail images.
// This is going to get the first 10 images (1.jpg → 10.jpg)
// and add them to the grid for the initial page setup.
// This is working fine.

var temp = "<div class='fwbrick' style='width:{width}px;'><a href='#' data-reveal-id='modal-{modal}'><img src='http://yamsandwich.com/img/profile/{index}.jpg' width='100%'></a></div>";
var w = 1,
  h = 1,
  html = '',
  limitItem = 10;
for (var i = 0; i < limitItem; ++i) {
  w = 1 + 3 * Math.random() << 0;
  html += temp.replace(/\{width\}/g, w * 150).replace("{modal}", i + 1).replace("{index}", i + 1);
}

// create add more button
$(".add-more").click(function() {
  var temp = "<div class='fwbrick' style='width:{width}px;'><a href='#' data-reveal-id='modal-{modal}'><img src='http://yamsandwich.com/img/profile/{index}.jpg' width='100%'></a></div>";
  var w = 1,
    h = 1,
    html = '',
    limitItem = 10;

  // The problem is right here. 
  // I don’t know how to tell it to find images 11 to 20 or X to Y.
  // Right now, it just repeats the first 10. 
  // Even when I set `i` to `10` to start, I still just get images 1 – 10 over again.

  for (var i = 1; i < limitItem; ++i) {
    w = 1 + 3 * Math.random() << 0;
    html += temp.replace(/\{width\}/g, w * 150).replace("{modal}", i + 1).replace("{index}", i + 1);
  }

  wall.appendBlock(html);

});

// target the div for the wall
$("#freewall").html(html);

// create the walls structure
var wall = new Freewall("#freewall");
wall.reset({
  selector: '.fwbrick',
  animate: true,
  cellW: 150,
  cellH: 'auto',
  onResize: function() {
    wall.fitWidth();
  }
});

// load the images into the wall
var images = wall.container.find('.fwbrick');
images.find('img').load(function() {
  wall.fitWidth();
});

所以我想知道的是，如何获取add-more函数中的计数器来获取序列中接下来的10个 block 。

通过第一句中的链接或if you missed that, click here查看它的实际效果.

Answer 1

已更新

我找到了here在创建 html 之前检查图像是否实际存在的方法。将我之前提到的代码替换为:

var initial = 0; //Current image
var increment = 10; //total of images each time someone hits the button (and the initial images on the page)

function imageExists(image_url){
    var http = new XMLHttpRequest();
    http.open('HEAD', image_url, false);
    http.send();
    return http.status != 404;
}

function appendImageBlocks() {
    var temp = "<div class='fwbrick' style='width:{width}px;'><a href='#' data-reveal-id='modal-{modal}'><img src='http://yamsandwich.com/img/profile/{index}.jpg' width='100%'></a></div>";
    var w = 1, h = 1, html = '', limitItem = initial+increment;
    for (var i = initial; i < limitItem; ++i) {
console.log("http://yamsandwich.com/img/profile/"+(i+1)+".jpg");
        if(imageExists("http://yamsandwich.com/img/profile/"+(i+1)+".jpg")) {
            w = 1 + 3 * Math.random() << 0;
            html += temp.replace(/\{width\}/g, w*150).replace("{modal}", i + 1).replace("{index}", i + 1);
            initial++;
        } else {
            console.log("Image "+(i+1)+" not found");
            return "";
        };
    }
    return html;
}

$(".add-more").click(function() {
    html = appendImageBlocks();
    wall.appendBlock(html);
});

html = appendImageBlocks();

// target the div for the wall
//Rest of the code