我不太使用jquery，所以我可以建议如下的javascript选项：

const targetElement = document.querySelector(...) // I choose the div that we are going to append newdivs

我不知道它是否存在，但我假设有一个用于src url或任何其他数据的内容数组。

let arrayOfInfo = [{},{}] // this is a hypothetical array of objects that we will use  

arrayOfInfo.forEach(obj => {
let newDiv = document.createElement("div");
    newDiv.classList.add("page-break","no-gaps")
    newDiv.innerHTML=`<img id="image-${obj.index}" src=${obj.url} class="some-class">`
   
targetElement.append(newDiv);

})

所以用这种方法你可以自动化所有的事情。2如果你需要重用，你可以把它变成一个函数，然后在你需要的任何地方运行它。3如果你以后需要改变一些内容，这也是很方便的，所以你只需要改变数组的值，剩下的就自动化了。
希望这是你需要的。

很久以后我又试着做了一次，昨天我成功了，任何人都可以使用它。（你可以删除.splitImg { some style }类来删除空格。）
JSFiddle Example

let i = 0;
let seenUrls = new Set()

setInterval(() => {

let url = document.querySelectorAll('#someid p img')[i].src;
let image = document.querySelectorAll('#someid p')[i]
let gor = document.querySelectorAll('#someid p')

if (!seenUrls.has(url)) {
seenUrls.add(url)

    var t = Date.now();
    var img = new Image();
    var length = 5;
    var ylength = 5;
    img.onload = function() {
        var width = this.width,
            height = this.height,
            _length = -length,
            i, j;

        // create a <div/> with all basic characteristics, to be cloned over and over in the loops below.
        var $basicDiv = jQuery('<div/>', {
            class: 'splitImg',
            css: {
                'width': Math.floor(width/length),
                'height': Math.floor(height/ylength),
                'background-image': 'url(' + img.src + ')'
            }
        });
        // Finding a node in the DOM is slow. Do it once and assign the returned jQuery collection.
        // Also, #wrapper's width can be set here.
        var $wrapper = image;
        image.style.width = width + length * 2 + "px";
        
        for (i = 0; i > _length; i--) {
            for (j = 0; j > _length; j--) {
                $basicDiv.clone().css({'background-position': `${width/length * j}px ${height/ylength * i}px`}).appendTo($wrapper);
            }
        }
        console.log(Date.now() - t);
    }
    img.src = url

    i = (i + 1) % gor.length;
    
}

}, 50)

#someid {
    max-width: 100%;
}

#someid p {
  display:flex;
  flex-wrap:wrap;
  margin: 0 auto;
}

#someid p img {
    display: none!important;
}

.splitImg {
  padding: 1px;
  background-clip: content-box;
  background-repeat: no-repeat;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id="someid">
  <p>
  <img src="http://www.jqueryscript.net/images/Simplest-Responsive-jQuery-Image-Lightbox-Plugin-simple-lightbox.jpg" />
  </p>
  <p>
  <img src="https://www.jqueryscript.net/images/Responsive-Touch-Friendly-jQuery-Gallery-Lightbox-Plugin-lightGallery.jpg" />
  </p>
</div>