Jquery - how to load everything except the images?

Question

I'm currently working on a WordPress addition which loads full post content (normally it shows exceprts) when asked to. I did my code like this:

$(".readMore").click(function() {
var url = $(this).attr("href");
$(this).parent("p").parent("div").children("div.text").slideUp("slow", function () {
    $(this).load(url + " .text", function(){
        $(this).slideDown("slow");
    });
});
$(this).parent("p").fadeOut();
return false; });

And it works. But I don't want images to be loaded. I tried .text:not(img), but it didn't worked. How can I do this?

Answer 1

The trick, of course, is preventing the images from being downloaded unnecessarily by the user's browser; not displaying them is easy.

I only have two browsers were it's easy and convenient to tell what's downloading: Chrome and Firefox+Firebug. In my tests , Martin's solution using *:not(img) results in the images being downloaded (although not displayed) in both Chrome and Firefox+Firebug. (I emphasize "Firefox+Firebug" because Firebug can change the behavior of Firefox on occasion, and so it may well be changing its behavior here, although I don't think it is; more on that below.)

It took some tweaking, but this seems to do the trick (more on testing below):

$.ajax({
  url: url,
  success: function(data) {
    var div = $("<div>").html(data);
    if (stripImages) {
      // Find the images, remove them, and explicitly
      // clear the `src` property from each of them
      div.find("img").remove().each(function() {
        this.src = "";
      });
    }
    $(targetSelector).append(div.children());
  },
  error: function(jxhr, status, err) {
    display("ajax error, status = " + status + ", err = " + err);
  }
});

Live example The "Include big image" checkbox includes a large file from NASA's Astronomy Picture of the Day (APOD).

The key there was setting the src of the img elements to "" . On Chrome, just removing the elements was enough to prevent Chrome starting the download of the images, but on Firefox+Firebug it not only started downloading them, but continued even when the download took considerable time. Clearing the src causes Firefox to abort the download (I can see this in the Firebug Net console).

So what about IE? Or Firefox without Firebug? I only did unscientific testing of those, but it's promising: If I run my live example of Martin's solution on either IE or Firefox without Firebug in a VM, I see the VM's network interface working hard, suggesting that it's downloading that big APOD picture. In contrast, if I run my solution above in that same environment (with caches cleared, etc., etc.), I don't see the VM network interface doing that work, suggesting that the download is either not being started or is being aborted early on.

Answer 2

.text *:not(img)将从.text中选择不是图像的每个后代，因此从理论上讲它应该起作用。