Question

在我的网站上，我有一个更新部分，它将更新（画廊）分组到他们自己的div中。每个div都隐藏起来。他们选择一个部分，然后展开以展示新的画廊。

一切正常。但是，它会加载页面加载时的所有图像，这会导致沙漏的停留时间超过我喜欢的时间。在div显示后，有没有办法让图像加载？

编辑：

跟着：

    $(function() {
      $('.collapse img').attr('src', function(index, src) {
         return this.getAttribute('data-src');
      });
    });

collapse是包含图像的div名称。如何将其更改为仅更改当前div中的图像？所有折叠的div都具有相同的名称。但是，当扩展时，我希望它只加载那个div中的图像。现在，当我展开其中一个时，它会加载所有折叠div中的所有图像。

Answer 1

您的div不应包含启动时的图像。如果用户扩展div，您可以通过JavaScript加载图像。

示例：

function expandDiv(idOfDivElement) {
    divObj = document.getElementById(idOfDivElement);
    var imageObj = document.createElement('img');
    imageObj.setAttribute('src', 'path/example_image.jpg');
    divObj.appendChild(imageObj);
    // your expand div code here
}

您可以推进此功能并为图像网址添加第二个参数。如果要加载多个图像，请使用数组/逗号分隔字符串。

Answer 2

加载图像的过程取决于浏览器。您应该使用javascript加载该内容，例如ajax。

Answer 3

您可以从ajax加载图像（在可扩展的div中）... 只需使div可见，然后调用ajax来获取图像。然后使用.innerHtml()或者如果您使用jQuery，请使用.html()将图像放在展开的div中。

在这种情况下，您必须在ajax页面中构建html。它只会将html添加到eexpanded div。

这样可以更快地加载页面。

请提供反馈。

PHP：在扩展div之前不要加载图像？

3 个答案: