Ich muss ein Bild laden, ich muss die Link-URL erhalten und dieses Bild auf dem Bildschirm drucken. Aber es funktioniert nicht.

Was ist los mit meinem Skript? Was kann ich tun, damit es funktioniert und verbessert wird?

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/

Und dieses Laden div, was muss ich tun, damit es richtig funktioniert?

-2
renata costa 20 Aug. 2015 im 16:28

5 Antworten

Beste Antwort

Sie vermissen viel und haben viel, was Sie nicht brauchen. Ich habe auskommentiert, wo Sie keine Artikel benötigen. Insbesondere brauchen Sie kein Laden, da das Bild dort sein wird, bevor sie das sehen. Wenn Sie es dennoch möchten, sollten Sie es unter dem Bild laden, das Sie laden. So wird es vom Bild verdeckt. Ich kann es damit aktualisieren, wenn Sie möchten.

Was Sie vermissen, ist tatsächlicher Code, um die href in eine Bildquelle zu verwandeln, und Sie entfernen nicht die Standardaktion des Ankertags, sodass beim Klicken keine neue Seite geladen wird.

$(".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/

1
V_RocKs 20 Aug. 2015 im 13:54
$('.postmini').on('click',function(e){
    e.preventDefault();
    $('#loading').html('<img src="'+this.href+'">').children('img').one('load',function(){$(this).parent().slideUp('slow');});
});

Es wurde festgestellt, dass ich on anstelle von click verwendet habe. Dadurch können Sie this.href anstelle eines längeren $(this).attr('href') verwenden. Ich habe auch .one für ein untergeordnetes Bildelement verwendet, um herauszufinden, ob das Bild geladen wurde.

Aber ich habe gerade festgestellt, dass dies nutzlos ist, weil Sie einen Lader haben möchten. Ma schlecht.

$('.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();});});
});

Diese Methode ist das, wonach Sie suchen. Grundsätzlich möchten Sie auf den Link klicken, die Standardaktion zum Aufrufen des Links beenden, ein neues Bildelement erstellen und den Quellcode festlegen, sicherstellen, dass er vor dem Laden ausgeblendet ist, das neue Bildelement zum Laden hinzufügen, das übergeordnete Laden nach oben verschieben und nach prüfen laden und einblenden :)

0
bashleigh 20 Aug. 2015 im 13:59

Sie führen kein Ajax-Skript aus. ajaxComplete wird erst ausgelöst, nachdem ein Ajax-Skript abgeschlossen wurde.

Immer wenn eine Ajax-Anforderung abgeschlossen ist, löst jQuery das Ereignis ajaxComplete aus. Alle Handler, die mit der Methode .ajaxComplete () registriert wurden, werden zu diesem Zeitpunkt ausgeführt.

Sie sollten ein Ajax -Skript hinzufügen und dann wird ajaxComplete ausgeführt, wenn Sie die ajaxComplete-Methode registriert haben.

0
Sven van den Boogaart 20 Aug. 2015 im 13:34

Sie müssen nur ein img-Tag in Ihr "display div" einfügen, indem Sie auf den Link klicken ... um das Bild zu laden ... (Übrigens sind Ihre Syntaxfehler schrecklich ... Sie müssen Anführungszeichen für Attribute verwenden ^^)

So zum Beispiel:

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

Überprüfen Sie Folgendes: https://jsfiddle.net/u6j2udzb/8/ (zum Beispiel schnell erledigt)

Ich hoffe es hilft

1
Julo0sS 20 Aug. 2015 im 13:49

Im Moment platzieren Sie nur den Text aus dem Attribut "href" auf dem Link in das div. Sie müssen entweder ein Bild erstellen oder den bereitgestellten Link als Hintergrund verwenden.

Der schnellste Weg, dies zu sehen, besteht darin, diese Änderung vorzunehmen:

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+"' />");
0
Jon Allen 20 Aug. 2015 im 13:37