Question

我正在制作一个基于js的epub阅读器作为周末项目，我正在尝试将图书网页上每个图书页面上的图像的src属性更改为从epub zip加载的数据URI。这是我的功能：

//page contents is just an html string of the book's page
pageContents = GlobalZipLoader.load('epub.zip://' + pageLocation);
pageContents = replaceImages(pageContents)

...

function replaceImages(pageContents){
  $(pageContents).find('img').each(function(){
    var domImage = $(this);

    //this is something like ".../Images/img.jpg"
    var imageLocation = domImage.attr('src'); 

    //this returns the proper data-uri representation of the image
    var dataUri = GlobalZipLoader.loadImage('epub.zip://' + imageLocation);

    //this doesn't seem to "stick"
    domImage.attr('src', dataUri);
  });
  return pageContents;
}

来自replaceImages函数的返回pageContents仍然具有旧的src属性。如果需要，我可以提供更多细节，但非常感谢任何帮助。

感谢系统重启和Ilia G的正确答案：

function replaceImages(pageContents) {
    newContent = $(pageContent);
    ... manip ...
    return newContent;
}

Answer 1

您无需克隆它。只需设置pageContents = $(pageContents);，然后在pageContents上执行替换图片，然后return pageContents.html();

Answer 2

您应该尝试在图像加载完成后更改图像src;

我认为这是在loadImage函数中发生的。

根据您的更新问题：

我认为你不需要任何clone()。只需将pageContents存储在tempContents变量中并使用该变量

即可

Answer 3

由于pageContents只是一个字符串，因此您需要返回它的修改版本。试试这个：

function replaceImages(pageContents){
  // save jQuery object
  var $pageContents = $(pageContents);

  $pageContents.find('img').each(function(){
    var domImage = $(this);

    //this is something like ".../Images/img.jpg"
    var imageLocation = domImage.attr('src'); 

    //this returns the proper data-uri representation of the image
    var dataUri = GlobalZipLoader.loadImage('epub.zip://' + imageLocation);

    //this doesn't seem to "stick"
    domImage.attr('src', dataUri);
  });

  // return contents of the modified jQuery object
  return $pageContents.html();
}

使用jQuery attr操作后，Dom字符串不会改变

3 个答案: