Question

我需要加载图片，js需要获取链接网址并在屏幕上打印此图像。但它没有用。

我的剧本出了什么问题？我该怎么做才能让它发挥作用并改进它呢？

HTML

<div id=img></div>

<div id=loading></div>


<a href=http://png-5.findicons.com/files/icons/1580/devine_icons_part_2/128/my_computer.png class=postmini>Open image 1</a>
<br>
<a href=http://www.iconshock.com/img_jpg/BETA/communications/jpg/256/smile_icon.jpg class=postmini>Open image 2</a>

JS

$(function() {
$(".postmini").click(function(){

var element = $(this);
var I = element.attr("href");

$("#loading").html('<img src="loader.gif" align="absmiddle">&nbsp;loading...');

$("#loading").ajaxComplete(function(){}).slideUp();
$("#img").append(I);

 });
});

https://jsfiddle.net/u6j2udzb/

和这个加载div，我需要做些什么才能使它正常工作？

Answer 1

你只需要在你的＆＃34;显示div＆＃34;中插入一个img标签。点击链接...加载图片...（顺便说一下你的语法错误很糟糕......你必须使用属性引号^^）

就像这样：

$('.postmini').on('click',function(){
    //do something
});

检查一下：https://jsfiddle.net/u6j2udzb/8/ （例如快速完成）

希望有所帮助

Answer 2

您没有运行ajax脚本。 ajaxComplete仅在ajax script completed之后触发。

每当Ajax请求完成时，jQuery就会触发ajaxComplete 事件。任何和所有已注册的处理程序此时执行.ajaxComplete（）方法。

如果您注册了ajaxComplete方法，则应该使用ajax脚本，而ajaxComplete将会运行。

Answer 3

此刻，您只是将链接上“href”属性的文本放入div中。您需要创建图像或使用提供的链接作为背景。

最快捷的方法是改变这一变化：

var element = $(this);
var I = element.attr("href");

$("#loading").html('<img src="loader.gif" align="absmiddle">&nbsp;loading...');

$("#loading").ajaxComplete(function(){}).slideUp();
// $("#img").append(I);
$("#img").html("<img src='"+I+"' />");

Answer 4

$('.postmini').on('click',function(e){
    e.preventDefault();
    $('#loading').html('<img src="'+this.href+'">').children('img').one('load',function(){$(this).parent().slideUp('slow');});
});

注意到我使用了on而不是click这允许您使用this.href而不是更长$(this).attr('href')。我还在子图像元素上使用.one来查明图像是否已加载。

但我刚刚意识到这是没用的，因为你想拥有一台装载机。马不好。

$('.postmini').on('click',function(e){
    e.preventDefault();
    //best have the loader.gif showing on default before the load is complete.
    var img=$('<img class="loadedImage">');
    img.src=this.href;
    //img.css({display:none;});//remove this if you've enter CSS .loadedImage{display:none;}
    $('#loading').append(img).slideDown('slow',function(){$(this).children('.loadedImage').one('load',function(){$(this).fadeIn('slow');$(this).siblings('img[src="loader.gif"]').hide();});});
});

这种方法正是您所需要的。基本上你想点击链接，停止转到链接的默认动作，创建一个新的图像元素并设置src，确保它在加载前隐藏，添加新的图像元素加载，滑动父加载，检查加载和淡入:)

Answer 5

你错过了很多并且有很多你不需要的东西。我已经评论出你不需要物品的地方。特别是你不需要加载，因为图像会在他们看到之前就在那里。但是，如果您确实需要它，则应将其加载到正在加载的图像下方。所以它被图像覆盖了。如果你愿意，我可以用它来更新它。

您缺少的是将href转换为图像源的实际代码，并且您没有删除锚标记的默认操作，因此在单击时不会尝试加载新页面。

$(".postmini").click(function(event){
event.preventDefault();
var element = $(this);
var I = element.attr("href");

//$("#loading").html('loading...');

//$("#loading").ajaxComplete(function(){}).slideUp();
// remove old image if it is already there.
$("#img").empty();
// create variable holding the image src from the href link
var img = $("<img/>").attr("src", I)

$("#img").append(img);

});

https://jsfiddle.net/3g8ujLvd/

Answer 6

尝试并运行此简单代码段

$('#myButton').click(()=>{

  let imgUrl = $('#imgUrl').val();
  
  $.get(imgUrl)
  .done(() => {
    $('img').attr('src', imgUrl);
    $('#imgText').text('');
  })
  .fail(() => {
    $('#imgText').text('Image does not exist');
    $('img').attr('src', '');
  })

})

img {
  width: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Image url: <input type="text" id="imgUrl" value="https://upload.wikimedia.org/wikipedia/commons/7/75/Woman_mechanic_working_on_engine_%28cropped%29.jpeg"><br>
<button id="myButton" type="button">click here to load image</button>

<div id="imgText"></div>
<img>

JS点击加载图片

6 个答案: