Question

我正在创建一个图片库，我希望在单击下一个按钮时加载一些图像.....
例如，

$("#next").css({cursor:"pointer"}).click(function(){
            //load image1,image2,image3
        });

HTML

<img src="image1.jpg"><img src="image2.jpg"><img src="image3.jpg">

我不想将它们附加到分区，这些图像标签已经存在于'gallery'deg标签中...我只是想在页面加载时以及用户点击时阻止它们加载下一个按钮这些图片可以加载...谢谢

Answer 1

如果图像元素已经在您的标记中，并且它们已定义src属性，则在页面开始加载时将下载图像文件。

您应该以编程方式创建图像元素，或者在标记上留空src属性，然后在用户点击下一步时分配它。

选项1：

// on the click event...
var images = ['img1.jpg', 'img2.jpg', 'img3.jpg'],
    gallery = $('#gallery');
$.each(images, function () {
  $('<img/>').attr('src', this).appendTo(gallery);
});

选项2：

标记：

<img id="img1"/> <img id="img2"/> <img id="img3"/>

点击事件：

$('#img1').attr('src', 'image1.jpg');
$('#img2').attr('src', 'image2.jpg');
$('#img3').attr('src', 'image3.jpg');

修改

当你谈到延迟加载时，我会想到另一种选择。

选项3：

您可以删除图像的src属性，并使用$.data函数存储它，然后在您的点击事件中，将图像src恢复为其原始值，例如：

$(function () { // put a "defaultImage" on all images of gallery // and store the original src attribute $('#gallery img').each(function () { $(this).data('originalSrc', $(this).src).attr('src', 'defaultImage.jpg'); }); $("#next").click(function(){ $('#gallery img').each(function () { // restore the original src attribute: $(this).attr('src', $(this).data('originalSrc')); }); }); });

Answer 2

创建img元素并将它们添加到DOM中。

var img = $(document.createElement("img"));
img.attribute("src", "image1.jpg");
$("#mydiv").append(img);

在javascript / jquery中控制图像加载？

2 个答案: