Django {% static 'path' %} in javascript file

In my script.js:

pic.src = "/static/photos/1.jpg"; // This works
pic2.src = "{% static 'photos/1.jpg' %}" // Does not work

Why in the world this happens? Since in my home.html, the {% static 'path' %} works:

{% load staticfiles %}
<script src="{% static 'script.js' %}"></script>  // This works

And is it {% load staticfiles %} or {% load static %} ? Both work for me, script.js is loaded.

Since you are using django's template language you can ONLY do this within your template between <script> tags. In other words if you wished to use your pic2.src javascript variable in an external script then you would need to declare it between <script> tags like so

<script>
    var pic2.src = "{% static "photos/1.jpg" %}"
</script>

And then you could access it in your external scripts that you might load like this:

<script type="text/javascript" src="{% static "js/my_external_script.js" %}"></script>

Regarding your question concerning load static and load staticfiles there is little distinction. Both act as a joiner for the STATIC_URL in your settings.py and the actual path to the file itself so both should work for your case. See here and here for more info.

If you need many static (or media) url's in your .js files, this might be more convenient:

<script>
    var static_url = "{% get_static_prefix %}";
    var media_url = "{% get_media_prefix %}";
</script>

Then both url's are freely available in all javascript files.